Home
/
Free Courses
/
CSS
/
CSS Forms

CSS Forms

CSS can be used to style and enhance the appearance of HTML forms, making them more visually appealing and user-friendly. Here are some key aspects of styling forms with CSS:

Selectors: CSS selectors can be used to target specific form elements, such as input fields, checkboxes, radio buttons, select dropdowns, and buttons.
Box Model: Apply CSS properties like padding, margin, and border to control the spacing and layout of form elements.
Colors and Backgrounds: Use CSS properties like color, background-color, and background-image to customize the visual appearance of form elements.
Typography: Apply CSS properties like font-family, font-size, and text-align to control the typography of form labels, input fields, and buttons.
Pseudo-classes: Utilize pseudo-classes like :hover, :focus, :active, and : disabled to apply different styles to form elements based on user interactions or states.
Flexbox/Grid: CSS layout techniques like Flexbox and CSS Grid can be used to create responsive and well-organized form layouts.
Validation Styling: CSS can be used to style the visual appearance of form validation messages, indicating whether input is valid or invalid.

By using CSS to style forms, you can align them with your overall website design, enhance user experience, and create visually appealing and user-friendly input interfaces.

Styling Input Fields

The form consists of different input fields and we can control its styling. We can give padding, border, and 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;

}

Test Yourself

Output:-

Focused Inputs

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

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

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;

}

Test Yourself

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 for 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;

}

Test Yourself

Output:-

Styling Textareas

We can style the textarea the same as styling input fields. We can apply color, border, background color etc. properties 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;

}

Test Yourself

Output:-

Styling Select Menus

Select menus, also known as dropdown menus, can be styled using CSS to match the overall design of your website. Here's how you 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;

}

Test Yourself

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;

  }

}

Test Yourself

Output:-

Help Us to Improve our content

Let's Talk

CSS Cursor

Go back to Previous Course

Lecturely

SCO 9, 2nd Floor, Old Delhi Road,
Sector 14, Gurgaon - 122001.