🔥 $100K Hit! Where Will Bitcoin Go Next? Find Out Live!

Code has been added to clipboard!

Properties for CSS Form: Learn to Style HTML Input Forms

Reading time 5 min
Published Nov 14, 2016
Updated Jan 23, 2020

TL;DR – CSS form styling refers to adding properties to HTML forms to adjust their position, make them interactive, and improve their appearance overall.





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:

Example
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:

Example
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:

Example
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:

Example
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:

Example
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:

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

The following example adds a border once :focus triggers:

Example
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:

Example
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.

Example
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:

Example
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.

Example
textarea {       
    resize: none;
}

DataCamp
Pros
  • Easy to use with a learn-by-doing approach
  • Offers quality content
  • Gamified in-browser coding experience
  • The price matches the quality
  • Suitable for learners ranging from beginner to advanced
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable
Udacity
Pros
  • Simplistic design (no unnecessary information)
  • High-quality courses (even the free ones)
  • Variety of features
Main Features
  • Nanodegree programs
  • Suitable for enterprises
  • Paid Certificates of completion
edX
Pros
  • A wide range of learning programs
  • University-level courses
  • Easy to navigate
  • Verified certificates
  • Free learning track available
Main Features
  • University-level courses
  • Suitable for enterprises
  • Verified certificates of completion

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:

Example
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:

Example
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.