CSS can be used to style forms, including input fields, labels, buttons, and more.
Here are some common ways to style forms with CSS:
Style input fields: You can use CSS to style input fields by targeting the input selector.
As an example:
input {
font-size: 16px;
color: #333;
background-color: #fff;
border: 1px solid #ccc;
padding: 5px;
}
Style labels: Labels are typically used to describe input fields. You can use CSS to style labels by targeting the label selector.
As an example:
label {
font-size: 14px;
color: #333;
padding: 5px;
}
Style buttons: Buttons are used to submit or reset forms. You can use CSS to style buttons by targeting the button selector.
As an example:
button {
background-color: #333;
color: #fff;
border: none;
padding: 10px 20px;
cursor: pointer;
}
Style form elements on focus: You can also add styles to form elements when they are in focus.
As an example:
input:focus {
border: 2px solid #333;
background-color: #f5f5f5;
}
Style form elements on hover: Similarly, you can add styles to form elements when the user hovers over them.
As an example:
input:hover {
background-color: #f5f5f5;
}
Here's an example of how to style an input field using CSS:
To target specific input types for styling, you can use attribute selectors instead of the general input selector.
Here are some examples:
input[type="text"]: This will only select text fields.input[type="password"]: This will only select password fields.input[type="number"]: This will only select number fields.input[type="email"]: This will only select email fields.input[type="date"]: This will only select date fields.input[type="checkbox"]: This will only select checkbox fields.input[type="radio"]: This will only select radio button fields.
You can add an icon or image to an input field by using CSS and HTML.
As an example:
Padded inputs are input fields that have some extra space around their content, making them easier to read and interact with.
As an example:
Bordered inputs are input fields that have a visible border around them, making them stand out more on the page.
As an example:
Colored inputs are input fields that have a background color or border color applied to them, making them visually distinctive.
As an example:
Focused inputs are input fields that have a different style when the user clicks on them or focuses on them.
As an example:
An animated search input is an input field that has a search icon on one side and an animation that expands the input field when the user clicks on it.
As an example:
Styling Textareas
Textareas can be styled in much the same way as input fields, using CSS.
As an example:
Styling select menus can be done using CSS to customize the appearance of the select element and its options.
As an example:
To create responsive forms in CSS, you can use media queries to adjust the layout and styling of your form based on the width of the screen.
As an example: