CSS Forms Styling

🧑‍🎨 Styling Form Elements

CSS gives us the power to design forms with custom styles that improve their appearance and functionality. Below are some techniques for styling different form elements like text inputs, buttons, select dropdowns, and form controls.

🎨 Styling Input Fields and Buttons

Input Fields

Input fields can be styled with various properties to improve their look and feel. Here's how you can style an input field:

input[type="text"] {
  border: 2px solid #ccc;
  border-radius: 5px;
  padding: 8px;
  font-size: 16px;
  width: 100%;
}
 
input[type="text"]:focus {
  border-color: #06abeb;
  outline: none;
}

In this example:

• border: Defines the border color of the input field.
• border-radius: Rounds the corners of the input.
• padding: Adds space inside the input field.
• font-size: Sets the font size for the input text.
• :focus: Adds a border color change when the input is focused.

Buttons

Buttons are one of the most frequently used form elements. You can easily style buttons to make them more interactive and visually appealing.

button {
  background-color: #06abeb;
  color: white;
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 5px;
  cursor: pointer;
}
 
button:hover {
  background-color: #005d8c;
}

In this example:

• background-color: Sets the button's background color.
• color: Defines the text color.
• cursor: Changes the cursor to a pointer when hovered.
• :hover: Changes the background color when the button is hovered.

🎨 Styling Select Dropdowns

The select dropdown element can be styled to match your design. Here’s how you can style it:

select {
  padding: 8px;
  font-size: 16px;
  border-radius: 5px;
  border: 2px solid #ccc;
}
 
select:focus {
  border-color: #06abeb;
}

You can also customize the appearance of the dropdown arrow using custom properties or pseudo-elements, though full customization across all browsers might require extra steps (like hiding the default dropdown and using a custom design).

🎨 Placeholder Styling (::placeholder)

You can style the placeholder text inside input fields using the ::placeholder pseudo-element.

input::placeholder {
  color: #aaa;
  font-style: italic;
}

This style changes the placeholder text to an italic gray color.

🎨 Focus and Hover Effects on Form Elements

You can use :focus and :hover pseudo-classes to add interactivity and improve user experience when interacting with form elements.

input[type="text"]:hover {
  border-color: #06abeb;
}
 
textarea:focus {
  border-color: #06abeb;
  box-shadow: 0 0 5px rgba(0, 171, 235, 0.5);
}

In this example:

• :hover: Adds a border color change when the input or textarea is hovered.
• :focus: Adds a box shadow and border color change when the textarea is focused.

🎨 Styling Checkboxes and Radio Buttons

By default, checkboxes and radio buttons use the browser's default styles. You can customize them using custom styles and pseudo-elements.

Styling Checkboxes:

input[type="checkbox"] {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  border: 2px solid #ccc;
}
 
input[type="checkbox"]:checked {
  background-color: #06abeb;
  border-color: #06abeb;
}

Styling Radio Buttons:

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

Both checkboxes and radio buttons can be styled by changing their size, border, background color when checked, etc.

🎨 Customizing Checkboxes and Radio Buttons with Pseudo-elements

You can also use ::before and ::after pseudo-elements to create fully custom checkboxes and radio buttons.

Custom Checkbox:

input[type="checkbox"] {
  display: none;
}
 
input[type="checkbox"] + label::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid #ccc;
  border-radius: 5px;
  margin-right: 10px;
  vertical-align: middle;
}
 
input[type="checkbox"]:checked + label::before {
  background-color: #06abeb;
  border-color: #06abeb;
}

Here, the checkbox is hidden using display: none, and a custom checkbox is created using the label::before pseudo-element. The checkbox's checked state is styled using the :checked pseudo-class.

Custom Radio Button:

input[type="radio"] {
  display: none;
}
 
input[type="radio"] + label::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #ccc;
  margin-right: 10px;
  vertical-align: middle;
}
 
input[type="radio"]:checked + label::before {
  background-color: #06abeb;
  border-color: #06abeb;
  box-shadow: 0 0 5px rgba(0, 171, 235, 0.5);
}

Similar to the checkbox, the radio button is hidden, and a custom radio button is created using the label::before pseudo-element.

🧑‍🎨 Key Takeaways

🧪 Try Yourself

export default function App() {
  return <h1>Hello world</h1>
}