CSS Styling Forms

❮ Previous Next ❯

You can make an HTML form look much better by using CSS:

Styling Input Fields

You can control how wide an input field is by using the width property.

First Name

Example

input {
width: 100%;
}

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

You can utilize the "padding" property to create some extra room within a 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:

First Name Last Name

Example

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

Try it Yourself »

Note that we have set the box-sizing property to border-box. This makes sure that the padding and eventually borders are included in the total width and height of the elements.

Bordered Inputs

You can modify the size and color of a border by using the "border" property. Additionally, you can create rounded corners for an element using the "border-radius" property.

First Name

Example

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

Try it Yourself »

If you just want to add a line at the bottom, use the border-bottom property with its existing width and height attributes.

First Name

Example

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

Try it Yourself »

Colored Inputs

To give a color to the area behind your input, use the 'background-color' property. And if you want to change the color of the text, use the 'color' property.

Example

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

Try it Yourself »

Focused Inputs

In some web browsers, when you click on an input field, it may have a blue border around it. You can make this border go away by using this code: outline: none;.

You can apply changes to the input field when someone clicks on it by using the ":focus" selector in your HTML code.

Example

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

Try it Yourself »

Example

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

Try it Yourself »

Input with icon/image

If you'd like to place an icon inside an input field, you can achieve this by using the 'background-image' property. You can control the icon's placement within the input using the 'background-position' property. It's important to mention that we include a significant amount of left padding to make room for the icon.

Example

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 Input

In this example, we're using the CSS property called "transition" to make the search input box change its width smoothly when someone clicks on it.

Example

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

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

Try it Yourself »

Styling Textareas

Tip: Use the resize property to prevent textareas from being resized (disable the "grabber" in the bottom right corner):

Example

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 »

Styling Select Menus

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: #04AA6D;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}

/* Tip: use width: 100% for full-width buttons */

Try it Yourself »

<!DOCTYPE html>
<html>
  <head>
    <style>
      input {
        width: 100%;
      }
    </style>
  </head>
  <body>
    <h2>A full-width input field</h2>
    <form>
      <label for="fname">First Name</label>
      <input type="text" id="fname" name="fname">
    </form>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <style>
      input[type=text] {
        width: 100%;
        padding: 12px 20px;
        margin: 8px 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <h2>Padded input fields</h2>
    <form>
      <label for="fname">First Name</label>
      <input type="text" id="fname" name="fname">
      <label for="lname">Last Name</label>
      <input type="text" id="lname" name="lname">
    </form>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <style>
      input[type=text] {
        width: 100%;
        padding: 12px 20px;
        margin: 8px 0;
        box-sizing: border-box;
        border: 2px solid red;
        border-radius: 4px;
      }
    </style>
  </head>
  <body>
    <h2>Input fields with borders</h2>
    <form>
      <label for="fname">First Name</label>
      <input type="text" id="fname" name="fname">
      <label for="lname">Last Name</label>
      <input type="text" id="lname" name="lname">
    </form>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <style>
      input[type=text] {
        width: 100%;
        padding: 12px 20px;
        margin: 8px 0;
        box-sizing: border-box;
        border: none;
        border-bottom: 2px solid red;
      }
    </style>
  </head>
  <body>
    <h2>Input fields with bottom border</h2>
    <form>
      <label for="fname">First Name</label>
      <input type="text" id="fname" name="fname">
      <label for="lname">Last Name</label>
      <input type="text" id="lname" name="lname">
    </form>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <style>
      input[type=text] {
        width: 100%;
        padding: 12px 20px;
        margin: 8px 0;
        box-sizing: border-box;
        border: none;
        background-color: rgb(0 151 167);
        color: white;
      }
    </style>
  </head>
  <body>
    <h2>Input fields with color</h2>
    <form>
      <label for="fname">First Name</label>
      <input type="text" id="fname" name="fname" value="John">
      <label for="lname">Last Name</label>
      <input type="text" id="lname" name="lname" value="Doe">
    </form>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <style>
      input[type=text] {
        width: 100%;
        padding: 12px 20px;
        margin: 8px 0;
        box-sizing: border-box;
        border: 1px solid #555;
        outline: none;
      }

      input[type=text]:focus {
        background-color: lightblue;
      }
    </style>
  </head>
  <body>
    <h2>Input fields with color on :focus</h2>
    <p>In this case, the input field changes color when it is selected (clicked on).</p>
    <form>
      <label for="fname">First Name</label>
      <input type="text" id="fname" name="fname" value="John">
      <label for="lname">Last Name</label>
      <input type="text" id="lname" name="lname" value="Doe">
    </form>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <style>
      input[type=text] {
        width: 100%;
        padding: 12px 20px;
        margin: 8px 0;
        box-sizing: border-box;
        border: 3px solid #ccc;
        -webkit-transition: 0.5s;
        transition: 0.5s;
        outline: none;
      }

      input[type=text]:focus {
        border: 3px solid #555;
      }
    </style>
  </head>
  <body>
    <h2>Input fields with black border on :focus</h2>
    <p>In this code, the input field turns black around its border when someone clicks on it. Additionally, we've included the CSS transition property to create a smooth animation effect for the border color change. This transition takes 0.5 seconds to complete when the input field is clicked.</p>
    <form>
      <label for="fname">First Name</label>
      <input type="text" id="fname" name="fname" value="John">
      <label for="lname">Last Name</label>
      <input type="text" id="lname" name="lname" value="Doe">
    </form>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <style>
      input[type=text] {
        width: 100%;
        box-sizing: border-box;
        border: 2px solid #ccc;
        border-radius: 4px;
        font-size: 16px;
        background-color: white;
        background-image: url('searchicon.png');
        background-position: 10px 10px;
        background-repeat: no-repeat;
        padding: 12px 20px 12px 40px;
      }
    </style>
  </head>
  <body>
    <h2>Input field with an icon inside</h2>
    <form>
      <input type="text" name="search" placeholder="Search..">
    </form>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <style>
      input[type=text] {
        width: 130px;
        box-sizing: border-box;
        border: 2px solid #ccc;
        border-radius: 4px;
        font-size: 16px;
        background-color: white;
        background-image: url('searchicon.png');
        background-position: 10px 10px;
        background-repeat: no-repeat;
        padding: 12px 20px 12px 40px;
        transition: width 0.4s ease-in-out;
      }

      input[type=text]:focus {
        width: 100%;
      }
    </style>
  </head>
  <body>
    <h2>Animate width of search input</h2>
    <form>
      <input type="text" name="search" placeholder="Search..">
    </form>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <style>
      textarea {
        width: 100%;
        height: 150px;
        padding: 12px 20px;
        box-sizing: border-box;
        border: 2px solid #ccc;
        border-radius: 4px;
        background-color: #f8f8f8;
        font-size: 16px;
        resize: none;
      }
    </style>
  </head>
  <body>
    <h2>Styling textarea</h2>
    <p>
      <strong>Tip:</strong> Apply the resize property to stop textareas from resizing, thereby disabling the "grabber" in the bottom right corner.
    </p>
    <form>
      <textarea>Some text...</textarea>
    </form>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <style>
      select {
        width: 100%;
        padding: 16px 20px;
        border: none;
        border-radius: 4px;
        background-color: #f1f1f1;
      }
    </style>
  </head>
  <body>
    <h2>Styling a select menu</h2>
    <form>
      <select id="country" name="country">
        <option value="au">Australia</option>
        <option value="ca">Canada</option>
        <option value="usa">USA</option>
      </select>
    </form>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <style>
      input[type=button],
      input[type=submit],
      input[type=reset] {
        background-color: rgb(0 151 167);
        border: none;
        color: white;
        padding: 16px 32px;
        text-decoration: none;
        margin: 4px 2px;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <h2>Styling form buttons</h2>
    <input type="button" value="Button">
    <input type="reset" value="Reset">
    <input type="submit" value="Submit">
  </body>
</html>

❮ Previous Next ❯

CSS Basics

CSS Properties

CSS Responsive

CSS Grid

CSS Styling Forms

Styling Input Fields

Example

Padded Inputs

Example

Bordered Inputs

Example

Example

Colored Inputs

Example

Focused Inputs

Example

Example

Input with icon/image

Example

Animated Search Input

Example

Styling Textareas

Example

Styling Select Menus

Example

Styling Input Buttons

Example

Web Development