diff --git a/curriculum/challenges/english/blocks/lecture-working-with-pseudo-classes-and-pseudo-elements-in-css/672bbe9d6ec03ea954d92ff7.md b/curriculum/challenges/english/blocks/lecture-working-with-pseudo-classes-and-pseudo-elements-in-css/672bbe9d6ec03ea954d92ff7.md
index ad2116b4c18..3c8b3f1283b 100644
--- a/curriculum/challenges/english/blocks/lecture-working-with-pseudo-classes-and-pseudo-elements-in-css/672bbe9d6ec03ea954d92ff7.md
+++ b/curriculum/challenges/english/blocks/lecture-working-with-pseudo-classes-and-pseudo-elements-in-css/672bbe9d6ec03ea954d92ff7.md
@@ -5,7 +5,7 @@ challengeType: 19
dashedName: what-are-examples-of-input-pseudo-classes
---
-# --description--
+# --interactive--
The appearance and behavior of input elements matter when building web forms. A form with inputs that respond to user actions goes a long way in improving user experience, and it should not cause confusion or frustration.
@@ -13,6 +13,15 @@ CSS provides several input pseudo-classes that can make your forms more intuitiv
The `:focus` pseudo-class allows you to target an input element when a user selects or clicks on it, drawing attention to the active input field. This helps users easily identify where they're currently typing:
+:::interactive_editor
+
+```html
+
+
+```
+
```css
input:focus {
border: 2px solid crimson;
@@ -20,40 +29,98 @@ input:focus {
}
```
+:::
+
As the name implies, the `:hover` pseudo-class is triggered when the user places the cursor over an element. It provides visual feedback before the user interacts with the input, effectively alerting them that the input is ready for action.
+:::interactive_editor
+
+```html
+
+
+```
+
```css
input:hover {
background-color: orange;
}
```
+:::
+
In the example above, the input element background changes to an orange color when the user hovers over it, letting them know that the field is ready for interaction.
The `:checked` pseudo-class lets you style a radio button or checkbox differently when a user selects it. This way, the user can easily see which option they've chosen.
-Here is an example:
+Here is an example with a checkbox to agree to terms on a website.
+
+**NOTE**: Some of the CSS in this example uses properties that haven't been covered yet. This is just to give you an idea of how to create a custom checkbox. You will learn how all of this works in future lessons and workshops.
+
+:::interactive_editor
```html
+
```
```css
-.checkbox:checked {
+.checkbox {
appearance: none;
- width: 12px;
- height: 12px;
- background-color: coral;
+ width: 18px;
+ height: 18px;
+ border: 2px solid #ccc;
+ border-radius: 4px;
+ display: inline-block;
+ position: relative;
+ cursor: pointer;
+ transition: all 0.25s ease;
+ vertical-align: middle;
}
+
+.checkbox:hover {
+ border-color: #888;
+}
+
+.checkbox:checked {
+ background-color: #4caf50;
+ border-color: #4caf50;
+}
+
+.checkbox:checked::after {
+ content: "";
+ position: absolute;
+ left: 4px;
+ top: 0px;
+ width: 5px;
+ height: 10px;
+ border: solid white;
+ border-width: 0 2px 2px 0;
+ transform: rotate(45deg);
+}
+
+.checkbox:focus {
+ outline: 2px solid #90caf9;
+ outline-offset: 2px;
+}
+
```
+:::
+
`:required` targets input elements that have the `required` attribute. It signals to the user that they must fill out the field to submit the form.
-The HTML below has a form with two required input elements:
+Here is an example with a form that has some required input fields:
+
+:::interactive_editor
```html
+
```
-And this CSS applies an orange border of two pixels to the two required inputs:
-
```css
input:required {
border: 2px solid orange;
}
```
+:::
+
When validating forms, you can use the `:valid` pseudo-class to style the input fields that meet the validation criteria, and `:invalid` to style the input fields that do not meet the criteria. Typically, you will use green for a valid input and red for an invalid input.
Here is an example using the `:valid` pseudo-class:
+:::interactive_editor
+
+```html
+
+
+```
+
```css
input:valid {
border-color: green;
}
```
+:::
+
Here is an example of using the `:invalid` pseudo-class:
+:::interactive_editor
+
+```html
+
+
+```
+
```css
input:invalid {
border-color: crimson;
}
```
+:::
+
The `:disabled` pseudo-class allows you to select and style input elements that are disabled. These elements have the `disabled` attribute, which prevents users from interacting with them. When an input is disabled, it cannot be clicked, focused, or edited.
-Here is an example of a label and a disabled input element:
-
-```html
-
-
-```
+Here is an example of a label and a disabled input element.
In the CSS, we are targeting that disabled input and giving it a background color of `lightgray` and changing the cursor pointer to `not-allowed`.
+:::interactive_editor
+
+```html
+
+
+```
+
```css
.text-input:disabled {
background-color: lightgray;
@@ -112,6 +208,8 @@ In the CSS, we are targeting that disabled input and giving it a background colo
}
```
+:::
+
The `cursor: not-allowed;` CSS property value changes the appearance of the cursor to indicate that an action is not permitted.
When applied to an element, it shows a cursor with a circle-slash symbol (usually a circle with a diagonal line through it) to signal to users that the element is not interactive or cannot be clicked or interacted with.