CSS Formulier

Using CSS, you can greatly improve the appearance of HTML forms:

亲自试一试

Set the style of the input field

Gebruik width property to determine the width of the input field:

Voorbeeld

input {
  width: 100%;
{}

亲自试一试

The previous example applies to all <input> elements. If you want to set styles for specific input types only, you can use attribute selectors:

  • input[type=text] - It will only select text fields
  • input[type=password] - It will only select password fields
  • input[type=number] - It will only select numeric fields
  • etc...

Fill the input box

Gebruik padding property to add space within the text field.

Tip:If there are many inputs, you may also need to add margins to add more space outside of them:

Voorbeeld

input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
{}

亲自试一试

Note that we have set box-sizing property is set to border-boxThis ensures that the total width and height of the element include the padding and the final border.

Please refer to our CSS Box Sizing In this chapter, you will learn about box-sizing for more information about the property.

Input box with border

Please use border property to change the border thickness and color, and use border-radius property to add rounded corners:

Voorbeeld

input[type=text] {
  border: 2px solid red;
  border-radius: 4px;
{}

亲自试一试

If you only need the bottom border, please use border-bottom Property:

Voorbeeld

input[type=text] {
  border: none;
  border-bottom: 2px solid red;
{}

亲自试一试

colored input box

Please use background-color property to add a background color to the input, and use color property to change the text color:

Voorbeeld

input[type=text] {
  background-color: #3CBC8D;
  color: white;
{}

亲自试一试

input field that has gained focus

By default, some browsers add a blue outline around the input box when it gains focus (click). You can add outline: none; to eliminate this behavior.

Gebruik :focus The selector can set styles for the input field when it gains focus:

Voorbeeld 1

input[type=text]:focus {
  background-color: lightblue;
{}

Klik in het tekstvak:

亲自试一试

Voorbeeld 2

input[type=text]:focus {
  border: 3px solid #555;
{}

Klik in het tekstvak:

亲自试一试

invoervak met pictogram/afbeelding

Als je een pictogram of afbeelding in het invoervak wilt opnemen, gebruik dan background-image eigenschap en deze samen te stellen met background-position eigenschappen samen te stellen. Let ook op dat we een grotere linkse binnenrand (padding-left) hebben toegevoegd om ruimte voor het pictogram te laten:

Voorbeeld

input[type=text] {
  background-color: white;
  background-image: url('searchicon.png');
  background-position: 10px 10px; 
  background-repeat: no-repeat;
  padding-left: 40px;
{}

亲自试一试

zoekinvoervak met animatie

In dit voorbeeld gebruiken we CSS transition eigenschap om een animatie in te stellen voor de breedteverandering van de zoekinvoervakken wanneer deze focus krijgen. Later, zul je in onze CSS 过渡 leer je meer over transition kennis van de eigenschappen.

Voorbeeld

input[type=text] {
  transition: width 0.4s ease-in-out;
{}
input[type=text]:focus {
  width: 100%;
{}

亲自试一试

Stel de stijl van de tekstvakken in

Tip:Gebruik resize De eigenschap voorkomt het aanpassen van de grootte van textareas (schakelt de 'grijper' in de rechter onderhoek uit):

Voorbeeld

textarea {
  width: 100%;
  height: 150px;
  padding: 12px 20px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: #f8f8f8;
  resize: none;
{}

亲自试一试

Stel de stijl van het keuzemenu in

Voorbeeld

select {
  width: 100%;
  padding: 16px 20px;
  border: none;
  border-radius: 4px;
  background-color: #f1f1f1;
{}

亲自试一试

Stel de stijl van de invoerknop in

Voorbeeld

input[type=button], input[type=submit], input[type=reset] {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
{}
/* 提示：请使用  width: 100%，以实现全宽按钮 */

亲自试一试

有关如何使用 CSS 设置按钮样式的更多知识，请学习我们的 CSS 按钮 教程。

响应式菜单

请调整 TIY 编辑器窗口的大小来查看效果。当屏幕的宽度小于 600 像素时，使两列上下堆叠而不是左右堆叠。

高级：接下来的例子使用 媒体查询 来创建响应式表单。在下一章中，您将学到更多相关知识。

查看响应式菜单