CSS Form Styling

A form is an interactive HTML element that collects user inputs on a webpage. For example,

The above example shows the default form without any styles.

Here, the form is styled using different CSS properties.


Create a Form

A form is created using the <form> element, and user input is collected using <input> element. For example,

<form action="/submit" method="post">
  <input type="text" name="name" placeholder="Your name">
  <input type="password" name="password" placeholder="Your password">
  <input type="submit" value="Submit">
</form>

Browser Output

Here, the default form doesn't look good without any styles.


Selecting Form Element

The form elements can be selected in the following ways:

1. Selecting the form element

Form elements can be selected by referring to their element names. For example,

  • input: selects all the input fields
  • textarea: selects all the text areas
  • label: selects all level elements

2. Selecting the form element attribute

Form elements can also be selected by referring to their attributes using element attribute selectors. For example,

  • input[type=text]: selects all input fields having type attribute set to text
  • input[type=password]: selects all input fields having type attribute set to password
  • input[type=number]: selects all input fields having type attribute set to number

Styling Input Field

The input field allows us to enter and submit the data in the form. For example,

<input type="text" name="name" id="name" >

Browser Output

Default Input Field

We can add the following styles to the input field,

  • Width
  • Padding
  • Margin
  • Border
  • Border radius
  • Box shadow
  • Font
  • Colored input
  • Focused input

Let's explore each of them in detail.


Adding Width to Input Field

The width property adds width to the input field. For example,

input{
    width: 100%;
}

Browser Output

Here, the input field expands to take the full width of the document.


Adding Padding to Input FIeld

The padding property adds space between the input field content and border. For example,

input{
padding: 12px;
width: 100%;
}

Browser Output

Here, a padding of 12px is added to the input field.


Adding Margin to Input Field

The margin property adds space around an element, creating space outside of each input field. For example,

input {
    margin: 20px 0;
    width: 100%;
    padding: 10px;
}

Browser Output

In the above example,

margin: 20px 0

adds 20px of vertical margin in the input field.


Adding Border to Input Field

The border property adds a border around the input field. For example,

input {
    border: 4px solid black;
}

Browser Output

In the above example, the border property adds a solid black border of 4px.


Adding Border Radius to Input Field

The border-radius property adds the border radius to make the rounded input field corners. For example,

input {
    border-radius: 10px;
}

Browser Output

Here, the border-radius property rounds the corners of the input field with 10px border radius.


Adding Box Shadow to Input FIeld

The box-shadow property adds a shadow to the input field. For example,

input:hover {
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.94);
}

Browser Output

The above example creates a shadow effect around the input field when it is being hovered.


Colored Input

The background-color property adds background color, and the color property adds text-color to input. For example,

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS Form Styling</title>
    </head>

    <body>
        <form>
            <label for="username">Username</label>
            <input type="text" name="username" id="username" value="username" />
        </form>
    </body>

</html>
input {
    background-color: purple;
    color: white;
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    box-sizing: border-box;
}

Browser Output

In the above example,

  • background-color: purple adds a purple color to input background
  • color:white sets the text color to white

Focused Input

The :focus selector is used to change the properties of an input field when it is in focus. For example,

input:focus {
    background-color: yellow;
}

Browser Output

Here, the background color changes to yellow when the input is focused.


Styling Text Areas

A text area allows us to enter multiple lines of text. For example,

<textarea>Start Writing...</textarea>

Browser Output

The above example shows the default text area without any styles.

We can add different CSS stylings to the text area as,

textarea {
    background-color: pink;
    width: 100%;
    height: 100px;
    padding: 10px 0;
    box-sizing: border-box;
    border-radius: 4px;
    color: purple;
}

Browser Output

In the above example,

  • background-color: pink adds a pink color to the background of text-area
  • width: 100% expands text area to its full width
  • height: 100px sets the height of text area to 100px
  • padding: 10px adds a padding of 10px in the text area
  • box-sizing: border-box ensures padding and borders to height and width of text area
  • border-radius: 4px rounds the corner of text area with 4px radius
  • color: purple sets the text color to purple

Styling Drop Down Menus

A drop down menu provides a list of options to the user. For example,

<select>
    <option>Select one</option>
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
</select>

Browser Output

The above example shows a default drop-down menu without any custom styles.

We can add different CSS stylings to the drop-down menu as shown below,

select {
    background-color: lightgray;
    width: 100%;
    padding: 10px;
    border-radius: 4px;
}

Browser Output

In the above example,

  • background-color:lightgray adds a light gray color to background of drop-down
  • width:20% expands drop-down menu to 20% of its original width
  • padding:10px adds a padding of 10px in the drop-down menu
  • border-radius: 4px rounds the corner of drop-down menu with 4px radius

Styling Radio Button

A radio button allows us to select only a single option from the list. For example,

<label for="option1">Option 1</label>
<input type="radio" id="option1" name="radioGroup" value="option1" />

<label for="option2">Option 2</label>
<input type="radio" id="option2" name="radioGroup" value="option2" />

<label for="option3">Option 3</label>
<input type="radio" id="option3" name="radioGroup" value="option3" />

Browser Output

The above example represents a default radio button without any CSS styles.

We can add different CSS styles to the radio button as,

input[type="radio"] {
    width: 20px;
    height: 20px;
    margin-right: 10px;
}

Browser Output

In the above example,

  • width: 20px sets the width of radio button to 20px
  • height: 20px sets the height of radio button to 20px
  • margin-right: 10px sets the 10px margin to the right side

Styling Check Box

The check box allows us to select multiple options from the list. For example,

<input type="checkbox" id="option1" name="checkboxGroup" value="option1" />
<label for="option1">Option 1</label>

<input type="checkbox" id="option2" name="checkboxGroup" value="option2" />
<label for="option2">Option 2</label>

<input type="checkbox" id="option3" name="checkboxGroup" value="option3" />
<label for="option3">Option 3</label>

Browser Output

The above example shows a checkbox with default appearance.

We can add different CSS stylings to the checkbox as,

input {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    cursor: pointer;
}

Browser Output

In the above example,

  • width: 20px sets the width of check box to 20px
  • height: 20px sets the height of check box to 20px
  • margin-right: 10px sets the 10px margin to the right side
  • cursor: pointer sets the cursor as pointer on hovering checkbox

Styling Submit Button

A submit button triggers the submission of form data. For example,

<input type="submit" value="Submit">

Browser Output

The above example shows a default submit button.

Let's add some CSS stylings to the button,

input[type="submit"] {
    background-color: purple;
    width: 180px;
    display: block;
    margin: 0px auto;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    font-size: 18px;
    font-family: "Courier New", Courier, monospace;
    color: white;
    margin-top: 30px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
}

input[type="submit"]:hover {
    background-color: indigo;
}

Browser Output

Here, the submit button is styled with different CSS properties.

Our premium learning platform, created with over a decade of experience and thousands of feedbacks.

Learn and improve your coding skills like never before.

Try Programiz PRO
  • Interactive Courses
  • Certificates
  • AI Help
  • 2000+ Challenges