CSS Forms

CSS forms are used to provide style to input fields, textarea, select option and buttons.


Styling Input Fields

Form consist of different input fields and we can control its styling. We can give padding, border, color to those input fields.

Input:-

Index.html
	
<body> 
	  <form>
       <input type="text"/>
   </form>
</body>

Style.css
input[type="text"]{
     padding: 20px;
     background-color: #ccc;
     border: 1px solid #333;
} 

Output:-


Focused Inputs

By default, some browsers will add a blue outline around the input when it gets focus (clicked on). We can remove this behavior by adding outline: none; to the input.

Use the :focus selector to do something with the input field when it gets focus.

Input:-

Index.html
	
<body> 
	  <form>
       <input type="text"/>
   </form>
</body>

Style.css
input[type="text"]{
     padding: 20px;
     background-color: #ccc;
     border: 1px solid #333;
}
input[type=text]:focus {
     border: 3px solid #555;
} 

Output:-


Input with icon/ image

If we want an icon inside the input, use the background-image property and position it with the background-position property.

We can also add a large left padding to reserve the space of the icon.

Input:-

Index.html
	
<body> 
	  <form>
       <input type="text" placeholder=”Search”/>
   </form>
</body>

Style.css
input[type="text"]{
	   background-color: #fff;
    background-image: url(‘searchicon.png’);
    background-position: 10px 10px;
    background-repeat: no-repeat;
    border: 2px solid #c6c6c6;
    padding: 12px 10px 10px 40px;
} 

Output:-


Styling Textareas

We can style the textarea same as we are styling input fields. We can apply color, border, background color etc. properities to it.

Input:-

Index.html
	
<body> 
	  <form>
       <textarea placeholder="Enter value here..."></textarea>
   </form>
</body>

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

Output:-


Styling Select Menus

In the same way, we can style select menus and their options.

Input:-

Index.html
	
<body> 
	  <form>
       <select>
          <option>Option 1</option>
          <option>Option 2</option>
          <option>Option 3</option>
          <option>Option 4</option>
      </select>
   </form>
</body>

Style.css
select {
  width: 100%;
  padding: 16px 20px;
  border: none;
  border-radius: 4px;
  background-color: #f1f1f1;
}

Output:-


Responsive Form

These are the type of forms which doesnot effect its styling if we try to resize the window. It has responsive nature throughout whether it is for tablet, desktop or phone.

Input:-

Index.html
	
<body> 
	  <div class="container">
      <form>
        <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>
        </form>
    </div>
</body>

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

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

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

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

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .col-25, .col-75, input[type=submit] {
    width: 100%;
    margin-top: 0;
  }
}

Output:-