Properties for CSS Form: Learn to Style HTML Input Forms

CSS Form: Main Tips

• HTML offers user input elements such as <form>, <input>, <textarea>, <button>, <select>, and <option>.
• CSS form styling creates a design for these elements.
• You can animate and modify CSS forms, as well as add many styling properties to the input fields.

Styling Input Fields

Selecting Input Type

CSS attribute selectors select specific CSS input types for styling:

• input[type=text] - selects form fields that accept text.
• input[type=password] - selects form fields that accept passwords.
• input[type=number] - selects form fields that accept numbers.
• etc.

Changing the Width

The width property lets you change the width of the input fields.

The example will apply to all the <input> elements and set their width to 100%:

Type text here:

input {
      width: 100px; /* When specifying this, you can use both px and % */
}

Padded Inputs

The padding and margin properties add space inside and around the input field to make it more spacious.

Tip: both of these properties accept length indicators (for instance, px and em) and percentages as length values.

The example below creates space for the input field of CSS form:

Your text:

input[type=text] {
    width: 80%;
    padding: 15px 22px;
    margin: 10px 5px;
    box-sizing: border-box;  
}

Note: we set the property of box-sizing to the value of border-box to include padding and borders in the total height and width of the elements.

Bordered Inputs

The border property controls the thickness, border-radius (rounded corners), style, and color of borders in CSS forms.

In the example, we add a thick purple border to the field:

Your text:

input[type=text] {
    border: 4px solid #8842d5;
    border-radius: 5px;  
}

If you need to add only one, two, or three borders, you can use longhand border properties. For example, the border-bottom property adds a border at the bottom:

Your text:

input[type=text] {
    border: none;
    border-bottom: 4px solid #8842d5;  
}

Colored Inputs

The background-color property adds a background inside the input field. To change the color of the text inside the field, use color.

The example below illustrates how you can color your input field:

Your text:

input[type=text] {
    background-color: #8842d5;
    color: white;  
}

Focused Inputs

CSS forms and their input fields become more interactive when their styling properties change once users click on them.

Your text:

You should add the CSS pseudo class called :focus to create a unique style for the form when it has focus.

This example changes the background color of an input field after selection:

input[type=text]:focus {
    background-color: #8842d5;
}

The following example adds a border once :focus triggers:

input[type=text]:focus {
     border: 5px solid #8842d5; 
}

Note: you can remove the blue outline around the form by setting the outline property to none.

Adding an Icon or a Background Image

The background-image property adds an image to the input field.

Your text:

input[type=text] {
    background-color: #9476f7;
    background-image: url('search-icon.png');
    background-position: 9px 10px;
    background-repeat: no-repeat;
    padding-left: 50px;  
}

• By adding the background-position property, you indicate the position for images. Make sure that the image fits the text field correctly.
• You should set the background-repeat to no-repeat to guarantee that the image appears only once.

Animated Search Input

The transition property animates the width of the input field when users click on it. To do that, we need to define the width property twice for CSS forms.

input[type=text] {
    -webkit-transition: width 0.5s ease-in-out;
    transition: width 0.5s ease-in-out;
}

input[type=text]:focus {
    width: 80%;
}

• Set the default width of the input field for when it is inactive.
• Use the transition property and include width, the time it will take for the animation to end, and the type of animation.
• Define the width of the CSS form when it has :focus. It sets how far the input field will expand once the animation triggers:

Text Areas

Properties for CSS forms can style text areas that include several lines of data as well. You can set padding, borders, width, height, and other CSS rules to design text areas neatly.

This example styles a text area and prevents users from changing its size:

textarea {
    width: 80%;
    height: 200px;
    padding: 15px 22px;
    box-sizing: border-box;
    border: 4px solid #ccc;
    border-radius: 5px;
    background-color: gray;
    resize: none;  
}

Remember that the <textarea> element is resizable by default. Users can use the grabber on the right bottom corner and change the size of the box. You can disable this feature by using the resize property set to none.

textarea {       
    resize: none;
}

Select Menus

HTML <select> and <option> element create simple drop down menus.

This example styles the drop down menu to add backgrounds, colors, and borders:

select {
    width: 80%;
    padding: 18px 22px;
    border: none;
    border-radius: 5px;
    color: white;
    background-color: #8842d5;  
}

Input Buttons

An important step of CSS form styling is adjusting the way the form buttons look.

This example uses the selector of CSS input types to style all three buttons:

input[type=button], input[type=reset], input[type=submit] {
    background-color: #8842d5;
    border: none;
    color: white;
    padding: 18px 36px;
    text-decoration: none;
    margin: 5px 4px;
    cursor: pointer;  
}

CSS Form: Useful Tips

• Since visitors use the input forms directly, developers need to guarantee the correct transitions and smoothness of forms in websites.
• HTML forms styled with CSS might look great, but the data provided through them needs to be validated.