CSS Form

A form example, we use CSS to render HTML form elements:

Example

input[type=text], select {
   width: 100%;
   padding: 12px 20px;
   margin: 8px 0;
   display: inline-block;
   border: 1px solid #ccc;
   border-radius: 4px;
   box-sizing: border-box;
}
 
input[type=submit] {
   width: 100%;
   background-color: #4CAF50;
   color: white;
   padding: 14px 20px;
   margin: 8px 0;
   border: none;
   border-radius: 4px;
   cursor: pointer;
}
 
input[type=submit]:hover {
   background-color: #45a049;
}
 
div {
   border-radius: 5px;
   background-color: #f2f2f2;
   padding: 20px;
}

 Try It! 

Input Style

Use the width property to set the width of the input box:

Example

input {
   width: 100%;
}

 Try It! 

In the above example, the width of all <input> elements is set to 100%. If you only want to set a specified type of input box, you can use the following attribute selector:

• input[type=text] - Select the text input box

• input[type=password] - Select the input box for the password

• input[type=number] - Select the input box of the number

• ...

Fill In The Input Box

Use padding property in the input box.

Example

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

 Try It! 

Note: that we set the box-sizing to the value of border-box. This ensures that the browser presents an input box with a specified width and height, and the border and inner margin are calculated together.
You can read more about CSS3 box size .

Input Frame

Use border property can modify the color or size of the input frame using the border-radius property may be added to the rounded input:

Example

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

 Try It! 

If you want to add a bottom border can use border-bottom property:

Example

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

 Try It! 

Input Color

You can use background-colorproperty to set the background color of the input box, colorthe properties for modifying text color:

Example

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

 Try It! 

Input Focus

By default, some browsers will have a blue outline when the input box is focused (click on the input box). We can set the input style is outline: none; to ignore the effect.

Use :focus pseudo-class, it can provid the style in the input box when it is acquired focus:

Example

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

 Try It! 

Example

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

 Try It! 

Input Icon

If you want to add an icon in the input box, you can use background-image property, and background-position property for positioning. 

Notes: Giving a left margin to the icon, so that the icon has a certain amount of space:

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! 

Animated Search Box

The following example uses the CSS transition property, which sets the input box to expand to the right when it gets focus. You can read more in the CSS animation chapter.

Example

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

 Try It! 

Textarea Style

Note: Use the resize property to disable resize function of the textarea (usually drag the lower right foot to reset the size).

Example

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

 Try It! 

Drop-Down Menu Style (Select)

Example

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

 Try It! 

Button Style

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 set the full width button */

 Try It!

For more information, please refer to our CSS button tutorial.

Responsive Form

Responsive forms can re-lay out various elements according to the size of the browser window. We can check the effect by resetting the size of the browser window:

Advanced: The following example uses CSS3 multimedia query to create a responsive form.

Example

* {
   box-sizing: border-box;
}
 
input[type=text], select, textarea {
   width: 100%;
   padding: 12px;
   border: 1px solid #ccc;
   border-radius: 4px;
   resize: vertical;
}
 
label {
   padding: 12px 12px 12px 0;
   display: inline-block;
}
 
input[type=submit] {
   background-color: #4CAF50;
   color: white;
   padding: 12px 20px;
   border: none;
   border-radius: 4px;
   cursor: pointer;
   float: right;
}
 
input[type=submit]:hover {
   background-color: #45a049;
}
 
.container {
   border-radius: 5px;
   background-color: #f2f2f2;
   padding: 20px;
}
 
.col-25 {
   float: left;
   width: 25%;
   margin-top: 6px;
}
 
.col-75 {
   float: left;
   width: 75%;
   margin-top: 6px;
}
 
/* Clear float */
.row:after {
   content: "";
   display: table;
   clear: both;
}
 
/* Responsive layout layout-when the screen width is less than 600px, set to stack elements up and down */
@media screen and (max-width: 600px) {
   .col-25, .col-75, input[type=submit] {
     width: 100%;
     margin-top: 0;
   }
}

 Try It!