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.
Write a CSS rule to style a button with a background color of #0088cc, a font color of #ffffff, and a font size of 16px.
button {
background-color: #0088cc;
color: #ffffff;
font-size: 16px;
}
Write a CSS rule to style an input field with a type of “text” to have a font size of 16px, padding of 8px, and a border with a width of 1px and a color of #cccccc.
input[type="text"] {
font-size: 16px;
padding: 8px;
border: 1px solid #cccccc;
}
Write a CSS rule to style a select box with a width of 100%, font size of 16px, padding of 8px, and a border with a width of 1px and a color of #cccccc.
select {
width: 100%;
font-size: 16px;
padding: 8px;
border: 1px solid #cccccc;
}
Write a CSS rule to style an invalid input field with a type of “text” to have a border color of #ff0000.
input[type="text"]:invalid {
border-color: #ff0000;
}
Write a CSS rule to create a custom checkbox with a label that displays a checkmark (✓) when the checkbox is checked and a border color of #0088cc.
/* 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;
}