Skip to main content

CSS Forms

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

Styling Input Fields​

Here's an example of how to style an input field using CSS:

Editor

Loading...

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.

Input with icon/image​

You can add an icon or image to an input field by using CSS and HTML.

As an example:

Editor

Loading...

Padded Inputs​

Padded inputs are input fields that have some extra space around their content, making them easier to read and interact with.

As an example:

Editor

Loading...

Bordered Inputs​

Bordered inputs are input fields that have a visible border around them, making them stand out more on the page.

As an example:

Editor

Loading...

Colored Inputs​

Colored inputs are input fields that have a background color or border color applied to them, making them visually distinctive.

As an example:

Editor

Loading...

Focused Inputs​

Focused inputs are input fields that have a different style when the user clicks on them or focuses on them.

As an example:

Editor

Loading...

Animated Search Input​

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:

Editor

Loading...

Styling Textareas​

Textareas can be styled in much the same way as input fields, using CSS.

As an example:

Editor

Loading...

Styling Select Menus​

Styling select menus can be done using CSS to customize the appearance of the select element and its options.

As an example:

Editor

Loading...

Responsive Form​

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:

Editor

Loading...