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;
}

Input style

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

Example

input {
  width: 100%;
}

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 paddingproperties in the padding may be added input box.

Example

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

Note that we set the box-sizingproperty 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 borderattribute can modify the color or size of the input frame using the border-radiusattribute may be added to the rounded input:

Example

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

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

Example

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

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;
}

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 :focusselect the style may be provided at the input box acquired focus:

Example

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

Example

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

Input icon

If you want to add an icon in the input box, you can use background-imagethe properties and for positioning background-positionattributes. Pay attention to setting the left margin of 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;
}

Animated search box

The following example uses the CSS transitionproperty, 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%;
}

Textarea style

Note: Use resizeproperty to disable resize the text box functionality (generally the bottom right drag can resize).

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;
}

Drop-down menu (select) style

Example

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

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;
 } /* Hint: Use width: 100% to set the full-width button */

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: 600 px ) { .col-25 , .col-75 , input [ type = submit ] { width: 100 %
 

  
  
     ;
    margin-top: 0;
  }
}