How To Style Common Form Elements with CSS

Forms are a crucial component of any website. They allow users to submit data and interact with the website in various ways. However, forms can look dull and unattractive without proper styling. In this tutorial, we will explain how to style common form elements with CSS, including text inputs, checkboxes, radio buttons, select boxes, and buttons.

Text Inputs

Text inputs are the most common form element used on websites. They allow users to enter text, numbers, and other data. To style text inputs, you can use the following CSS properties:

css

input[type="text"] {
border: 1px solid #ccc;
border-radius: 5px;
padding: 5px;
font-size: 16px;
}

This CSS will add a border, rounded corners, padding, and font size to all text inputs on the page. You can also change the color, background color, and other properties to match the design of your website.

Checkboxes

Checkboxes are used to allow users to select multiple options from a list. They can be styled using CSS as follows:

css

input[type="checkbox"] {
appearance: none;
border: 2px solid #ccc;
width: 16px;
height: 16px;
border-radius: 3px;
}input[type="checkbox"]:checked {
background-color: #ccc;
}

This CSS will remove the default appearance of checkboxes and add a border, width, height, and border-radius. The second rule will change the background color when the checkbox is checked.

Radio Buttons

Radio buttons are similar to checkboxes but allow users to select only one option from a list. They can be styled using CSS as follows:

css

input[type="radio"] {
appearance: none;
border: 2px solid #ccc;
width: 16px;
height: 16px;
border-radius: 50%;
}input[type="radio"]:checked {
background-color: #ccc;
}

This CSS will remove the default appearance of radio buttons and add a border, width, height, and border-radius. The second rule will change the background color when the radio button is checked.

Select Boxes

Select boxes are used to allow users to select an option from a list. They can be styled using CSS as follows:

css

select {
border: 1px solid #ccc;
border-radius: 5px;
padding: 5px;
font-size: 16px;
background-color: #fff;
background-image: url('arrow.png');
background-repeat: no-repeat;
background-position: right 5px center;
appearance: none;
}

This CSS will add a border, rounded corners, padding, font size, and background color to the select box. It will also add an arrow image to the right side of the box.

Buttons

Buttons are used to allow users to submit a form or perform other actions. They can be styled using CSS as follows:

css

button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}button:hover {
background-color: #3e8e41;
}

This CSS will add a background color, text color, padding, border radius, and cursor pointer to the button. The second rule will change the background color when the button is hovered over.

In summary, forms are an essential component of any website, and styling them properly can improve the user experience and make them more visually appealing. By using CSS, you can style