CSS Forms

CSS Tutorial

CSS Advanced

CSS Responsive

CSS Grid

CSS Attribute Selectors

The appearance of an HTML form can be greatly improved by using CSS:

HTML
				
					<h3>Using CSS to style an HTML Form</h3>
<div>
  <form action="/action_page.php">
    <label for="fname">First Name</label>
    <input type="text" id="fname" name="firstname" placeholder="Your name..">
    <label for="lname">Last Name</label>
    <input type="text" id="lname" name="lastname" placeholder="Your last name..">
    <label for="country">Country</label>
    <select id="country" name="country">
      <option value="australia">Australia</option>
      <option value="canada">Canada</option>
      <option value="usa">USA</option>
    </select>
    <input type="submit" value="Submit">
  </form>
</div>
CSS
				
					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: #03989E;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #03989E;
}

div {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}

Output

Padded Inputs & Bordered Inputs

The padding property is used to add space within the text field.

The border property is used to change the border size and color, and the border-radius property is used to add rounded corners.

HTML
				
					<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>
CSS
				
					input[type=text] {
  width: 100%;
  padding: 12px 20px;
  border: 2px solid red;
  margin: 8px 0;
  box-sizing: border-box;
}

Output

Border Bottom Input

The border-bottom property is used in case if you only want a bottom border.

HTML

				
					<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>
CSS
				
					input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: none;
  border-bottom: 2px solid red;
}

Output

Colored Inputs

The background-color property is used to add a background color to the input, and the color property to change the text color:

HTML
				
					<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>
CSS
				
					input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: none;
  background-color: #03989E;
  color: white;
}

Output

Focused Inputs

By default, some browsers add a blue outline around the input when it gets focused.  This behavior is removed by adding outline: none; to the input.

The: focus is used selector to do something with the input field when it gets focus:

HTML
				
					<p>input focus (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>
CSS
				
					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: #03989E;
  border: 3px solid #ccc;
}

Output

input focus (clicked on):

Input with icon/image

To insert the icon within the input, the background-image property is used and position it with the background-position property. Adding a large left padding to reserve the space of the icon:

HTML
				
					<h2>CSS [attribute*="value"] Selector</h2>
<div class="first_test">The first div element.</div>
<div class="second">The second div element.</div>
<div class="my-test">The third div element.</div>
<p class="mytest">This is some text in a paragraph.</p>
CSS
				
					[class*="te"] {
  background: pink;
}

Output

Input field with an icon inside

Styling Forms

The attribute selectors can be used for styling forms without class or ID:

HTML
				
					<h2>Responsive Form</h2>
<p>Resize the browser window to see the effect. When the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other.</p>

<div class="container">
  <form class="res" action="/action_page.php">
  <div class="row">
    <div class="col-25">
      <label for="fname">First Name</label>
    </div>
    <div class="col-75">
      <input type="text" id="fname" name="firstname" placeholder="Your name..">
    </div>
  </div>
  <div class="row">
    <div class="col-25">
      <label for="lname">Last Name</label>
    </div>
    <div class="col-75">
      <input type="text" id="lname" name="lastname" placeholder="Your last name..">
    </div>
  </div>
  <div class="row">
    <div class="col-25">
      <label for="country">Country</label>
    </div>
    <div class="col-75">
      <select id="country" name="country">
        <option value="australia">Australia</option>
        <option value="canada">Canada</option>
        <option value="usa">USA</option>
      </select>
    </div>
  </div>
  <div class="row">
    <div class="col-25">
      <label for="subject">Subject</label>
    </div>
    <div class="col-75">
      <textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>
    </div>
  </div>
  <br>
  <div class="row">
    <input type="submit" value="Submit">
  </div>
  </form>
</div>
CSS
				
					.res input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
}

.res label {
  padding: 12px 12px 12px 0;
  display: inline-block;
}

.res input[type=submit] {
  background-color: #03989E;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: right;
}

.res input[type=submit]:hover {
  background-color: #000;
}

.conta {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}

.col-288 {
  float: left;
  width: 25%;
  margin-top: 6px;
}

.col-788 {
  float: left;
  width: 75%;
  margin-top: 6px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

@media screen and (max-width: 600px) {
  .col-288, .col-75, .res input[type=submit] {
    width: 100%;
    margin-top: 0;
  }
}

Output

Responsive Form