4.1 Pseudo-class :checked
Form pseudo-classes in CSS provide ways to style form elements based on their state. These pseudo-classes help create interactive and accessible forms, enhancing user interface and experience. Let's look at the :checked, :disabled, :enabled, and :invalid pseudo-classes in more detail.
The :checked pseudo-class applies to form elements that are in the "selected" state. This applies to checkboxes (<input type="checkbox">), radio buttons (<input type="radio">), and options (<option>).
Syntax:
selector:checked {
properties: values;
}
Usage Example
In this example, selected checkboxes, radio buttons, and options get the respective background color when in the "selected" state:
/* Styling selected checkbox */
input[type="checkbox"]:checked {
background-color: #3498db;
}
/* Styling selected radio button */
input[type="radio"]:checked {
background-color: #2ecc71;
}
/* Styling selected option */
option:checked {
background-color: #e74c3c;
}
4.2 Pseudo-class :disabled
The :disabled pseudo-class applies to form elements that are in a disabled state. This is useful for styling elements that are temporarily unavailable for interaction.
Syntax:
selector:disabled {
properties: values;
}
Usage Example
In this example, disabled input fields and buttons receive the respective background color, border, and text color, and change the cursor to "not-allowed":
/* Styling disabled input field */
input:disabled {
background-color: #f0f0f0;
border-color: #ccc;
color: #888;
}
/* Styling disabled button */
button:disabled {
background-color: #d0d0d0;
color: #777;
cursor: not-allowed;
}
4.3 Pseudo-class :enabled
The :enabled pseudo-class applies to form elements that are in an enabled state. This allows you to style elements that are available for interaction.
Syntax:
selector:enabled {
properties: values;
}
Usage Example
In this example, enabled input fields and buttons are styled with respective background, border, and text color, and change the cursor to "pointer":
/* Styling enabled input field */
input:enabled {
background-color: #fff;
border-color: #3498db;
}
/* Styling enabled button */
button:enabled {
background-color: #2ecc71;
color: white;
cursor: pointer;
}
4.4 Pseudo-class :invalid
The :invalid pseudo-class applies to form elements that have failed validation. This allows you to style input fields containing incorrect data.
Syntax:
selector:invalid {
properties: values;
}
Usage Example
In this example, invalid input fields and text areas receive respective border and background color to visually indicate that the data has failed validation:
/* Styling invalid input field */
input:invalid {
border-color: #e74c3c;
background-color: #f9e0e0;
}
/* Styling invalid text area */
textarea:invalid {
border-color: #e74c3c;
background-color: #f9e0e0;
}
4.5 Full Implementation Example
/* Styling selected checkbox */
input[type="checkbox"]:checked {
background-color: #3498db;
}
/* Styling selected radio button */
input[type="radio"]:checked {
background-color: #2ecc71;
}
/* Styling disabled input field */
input:disabled {
background-color: #f0f0f0;
border-color: #ccc;
color: #888;
}
/* Styling disabled button */
button:disabled {
background-color: #d0d0d0;
color: #777;
cursor: not-allowed;
}
/* Styling enabled input field */
input:enabled {
background-color: #fff;
border-color: #3498db;
}
/* Styling enabled button */
button:enabled {
background-color: #2ecc71;
color: white;
cursor: pointer;
}
/* Styling invalid input field */
input:invalid {
border-color: #e74c3c;
background-color: #f9e0e0;
}
/* Styling invalid text area */
textarea:invalid {
border-color: #e74c3c;
background-color: #f9e0e0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Pseudo-classes Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<form>
<label>
<input type="checkbox" name="option1"> Option 1
</label>
<br>
<label>
<input type="radio" name="choice" value="1"> Choice 1
</label>
<label>
<input type="radio" name="choice" value="2"> Choice 2
</label>
<br>
<input type="text" placeholder="Enter your name" required>
<br>
<input type="email" placeholder="Enter your email" required>
<br>
<button type="submit">Submit</button>
<button type="button" disabled>Disabled Button</button>
</form>
</body>
</html>
GO TO FULL VERSION