THE WORLD'S LARGEST WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

CSS Forms


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

Try it yourself »

Styling Input Fields

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

Example

input {
    width: 100%;
}
Try it yourself »

The example above applies to all <input> elements. If you only want to style a specific input type, you can use attribute selectors:

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

Padded Inputs

Use the padding property to add space inside the text field.

Tip: When you have many inputs after each other, you might also want to add some margin, 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 »

Input frame

Note that we set the box-sizing attribute to Use the border property to modify the size or color of the input border, and use the border-radius property to add rounded corners to the input:

Example

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

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

Example

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

Input box color

You can use the background-color property to set the background color of the input box. The color property is used to modify the text color:

Example

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

Focused Inputs

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

Use the : focus selector to set the style of the input box when it gets focus:

Example

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

Example

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

Input box background

If you want to add an icon to the input box, you can use the background-image property and the background-position property for positioning. Pay attention to the left margin of the icon so that the icon has some 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 Input

The following example uses the CSS transition property, which sets the input box to stretch to the right when it gets focus. You can see more in the CSS Animation section.

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

Styling Textareas

Note: Use the resize property to disable the ability of the text box to resize (generally dragging the lower right corner can reset the size).

Example

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

Drop-down menu (select) style

Example

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

Styling Input Buttons

Example

input [ type = button ] , input [ type = submit ] , input [ type = reset ] { background-color: # 4CAF50 ; border: none ; color: white ; padding: 16 px 32 px ; text-decoration: none ; margin: 4 px 2 px ; cursor: pointer ; } /* Tip: Use width: 100% to set the full width button */
Try it yourself »

For more data about how to style catches with CSS, read our CSS Buttons Tutorial.


Input box focus

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

Use the : focus selector to set the style of the input box when it gets focus:

Example

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