Styling Buttons and Forms

In CSS, you can style buttons and forms to create a consistent and visually appealing look and feel for your web pages. In this chapter, we’ll explore the different ways you can style buttons and forms in CSS and how to customize their appearance and behavior.

Styling Buttons

Buttons are an important element in web design and can be used to trigger actions such as submitting a form, navigating to a new page, or performing a task. In CSS, you can style buttons using various properties such as background-color, color, font-size, border, and more.

To style a button, you can use the button element or create a custom class for your buttons and apply the styles to the class. You can also use the :hover, :active, and :focus pseudo-classes to change the style of the button when the user hovers over it, clicks it, or focuses on it.

button,
.button {
  background-color: #0088cc;
  color: #ffffff;
  font-size: 16px;
  border: none;
  padding: 8px 16px;
  cursor: pointer;
}

button:hover,
.button:hover {
  background-color: #0077bb;
}

button:active,
.button:active {
  background-color: #0066aa;
}

button:focus,
.button:focus {
  outline: none;
  box-shadow: 0 0 0 2px #0088cc;
}

Styling Form Elements

In addition to styling buttons, you can also style form elements such as input fields, text areas, and select boxes to create a consistent and visually appealing look and feel for your web pages. To style form elements, you can use the input, textarea, and select elements or create custom classes for your form elements and apply the styles to the classes.

input[type="text"],
input[type="email"],
textarea,
select {
  display: block;
  width: 100%;
  font-size: 16px;
  padding: 8px;
  border: 1px solid #cccccc;
  border-radius: 4px;
}

input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: #0088cc;
  box-shadow: 0 0 0 2px #0088cc;
}

Customizing form Validation Messages

In HTML, you can use the required attribute to specify that a form element is required and the pattern attribute to specify a regular expression that the element’s value must match. If the user tries to submit the form without filling out the required elements or if the values do not match the pattern, the browser will display a validation message.

In CSS, you can customize the appearance of the validation messages using the ::valid and ::invalid pseudo-elements.

input[type="text"]:valid,
input[type="email"]:valid,
textarea:valid,
select:valid {
  border-color: #0088cc;
}

input[type="text"]:invalid,
input[type="email"]:invalid,
textarea:invalid,
select:invalid {
  border-color: #ff0000;
}

Creating Custom Checkboxes and Radio Buttons

By default, checkboxes and radio buttons are displayed as small boxes or circles. However, you can use CSS to create custom checkboxes and radio buttons with your own designs. To do this, you can use the :before and :after pseudo-elements to create the custom styles and hide the default checkboxes and radio buttons using the opacity property.

/* Custom checkbox */
input[type="checkbox"] {
  position: absolute;
  opacity: 0;
}

input[type="checkbox"] + label {
  position: relative;
  cursor: pointer;
  padding: 0;
}

input[type="checkbox"] + label:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  border: 1px solid #cccccc;
  background-color: #ffffff;
}

input[type="checkbox"]:checked + label:before {
  content: "\2713";
  font-size: 16px;
  color: #ffffff;
  background-color: #0088cc;
  border-color: #0088cc;
}

/* Custom radio button */
input[type="radio"] {
  position: absolute;
  opacity: 0;
}

input[type="radio"] + label {
  position: relative;
  cursor: pointer;
  padding: 0;
}

input[type="radio"] + label:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  border: 1px solid #cccccc;
  border-radius: 50%;
  background-color: #ffffff;
}

input[type="radio"]:checked + label:before {
  background-color: #0088cc;
  border-color: #0088cc;
}

Conclusion

In conclusion, styling buttons and forms in CSS allows you to create a consistent and visually appealing look and feel for your web pages. By using various properties and pseudo-classes, you can customize the appearance and behavior of buttons and form elements. You can also create custom checkboxes and radio buttons and customize the appearance of form validation messages.

Exercises

To review these concepts, we will go through a series of exercises designed to test your understanding and apply what you have learned.

button {
  background-color: #0088cc;
  color: #ffffff;
  font-size: 16px;
}

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

select {
  width: 100%;
  font-size: 16px;
  padding: 8px;
  border: 1px solid #cccccc;
}

input[type="text"]:invalid {
  border-color: #ff0000;
}

/* Custom checkbox */
input[type="checkbox"] {
  position: absolute;
  opacity: 0;
}

input[type="checkbox"] + label {
  position: relative;
  cursor: pointer;
  padding: 0;
}

input[type="checkbox"] + label:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  border: 1px solid #cccccc;
  background-color: #ffffff;
}

input[type="checkbox"]:checked + label:before {
  content: "\2713";
  font-size: 16px;
  color: #ffffff;
  background-color: #0088cc;
  border-color: #0088cc;
}