CSS Forms

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

Try It Yourself

Set the style of the input field

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

Example

input {
  width: 100%;
}

Try It Yourself

The above example applies to all <input> elements. If you want to set the style for a specific input type, you can use an attribute selector:

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

fill the input box

Use padding property to add space within the text field.

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

Example

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

Try It Yourself

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

Please check our CSS Box Sizing In this chapter, we 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:

Example

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

Try It Yourself

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

Example

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

Try It Yourself

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:

Example

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

Try It Yourself

input field that gains focus

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

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

Example 1

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

Please click in the text box:

Try It Yourself

Example 2

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

Please click in the text box:

Try It Yourself

input box with icon/image

If you want to include an icon/image in the input box, please use background-image property, and combined it with background-position properties together. Also note that we added a larger left padding (padding-left) to leave space for the icon:

Example

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

Try It Yourself

animated search input box

In this example, we use CSS transition property for the width change animation of the search input box when it gains focus. Later, you will learn about CSS Transitions Learn more about transition knowledge of properties.

Example

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

Try It Yourself

Set the style of the text area

Hint:Use resize The property can prevent the resizing of textareas (disable the 'grabber' at the bottom right):

Example

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

Try It Yourself

Set the style of the select menu

Example

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

Try It Yourself

Set the style of input buttons

Example

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;
}
/* Tip: Use width: 100% to achieve full-width buttons */

Try It Yourself

For more knowledge on how to set button styles with CSS, please learn from our CSS Buttons Tutorial.

Responsive Menu

Please adjust the size of the TIY editor window to view the effect. When the screen width is less than 600 pixels, make the two columns stack vertically instead of horizontally.

Advanced: The following examples use Media Queries To create a responsive form. In the next chapter, you will learn more about related knowledge.

View Responsive Menu