CSS Forms

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

CSS Examples

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: #4C7EAF; color: white; padding: 14px 20px; margin: 8px 0; border: none; border-radius: 4px; cursor: pointer; } input[type=submit]:hover { background-color: #4777A6; } div { border-radius: 5px; background-color: #f2f2f2; padding: 20px; }

Try it Yourself »

Input (input) styles

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

CSS Examples

input { width: 100%; }

Try it Yourself »

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

  • input[type=text]- Selects text input fields
  • input[type=password]- Selects password input fields
  • input[type=number]- Selects number input fields
  • ...

Input Field Padding

UsagepaddingThe property can add padding inside the input box.

CSS Examples

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

Try it Yourself »

Note that we setbox-sizingThe property isborder-boxThis ensures that the browser renders the input box with the specified width and height including the border and padding.
For more content, you can readCSS3 Box Sizing 。

Input (input) border

UsageborderThe property can modify the size or color of the input border. Useborder-radiusThe property can add rounded corners to the input:

CSS Examples

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

Try it Yourself »

If you only want to add a bottom border, you can useborder-bottomProperty:

CSS Examples

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

Try it Yourself »

Input (input) color

You can usebackground-colorproperty to set the background color of the input field,colorproperty is used to modify the text color:

CSS Examples

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

Try it Yourself »

Input (input) focus

By default, some browsers will have a blue outline when the input box gets focus (clicking the input box). We can set the input style tooutline: none;to ignore this effect.

Usage:focusThe selector can set the style of the input box when it gets focus:

CSS Examples

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

Try it Yourself »

CSS Examples

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

Try it Yourself »

Input (input) icon

If you want to add an icon in the input box, you can usebackground-imageproperty and the positioningbackground-positionproperty. Note set the left margin of the icon to give it some space:

CSS Examples

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 box

The following example uses CSStransitionproperty, which sets the input box to extend to the right when it gets focus. You can useCSS Animationssection to see more content.

CSS Examples

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 Yourself »

Text box (textarea) style

Note:Usageresizeproperty to disable the text box's ability to resize (usually dragging the bottom-right corner to resize).

CSS Examples

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 »

Dropdown menu (select) styles

CSS Examples

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

Try it Yourself »

Button Styles

CSS Examples

input[type=button], input[type=submit], input[type=reset] { background-color: #4C7EAF; 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 Yourself »

For more content, please refer to ourCSS ButtonsTutorial.

Responsive Forms

Responsive forms can rearrange elements based on the size of the browser window. We can resize the browser window to see the effect:

Advanced:The following example usesCSS3 Media Queriesto create a responsive form.

CSS Examples

* { 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: #4C7EAF; color: white; padding: 12px 20px; border: none; border-radius: 4px; cursor: pointer; float: right; } input[type=submit]:hover { background-color: #4777A6; } .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 Floats*/ .row:after { content: ""; display: table; clear: both; } /*Responsive Layout - When screen width is less than 600px, set elements to stack vertically*/ @media screen and (max-width: 600px) { .col-25, .col-75, input[type=submit] { width: 100%; margin-top: 0; } }

Try it Yourself »
other extensions