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 boxinput[type=password]
- Select the input box for the passwordinput[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; }
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; }
If you want to add a bottom border can use border-bottom
property:
Example
input[type=text] { border: none; border-bottom: 2px solid red; }
Input Color
You can use background-color
property to set the background color of the input box, color
the 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 :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; }
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-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; }
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%; }
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; }
Drop-Down Menu Style (Select)
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; } /* Tip: 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: 600px) { .col-25, .col-75, input[type=submit] { width: 100%; margin-top: 0; } }