mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-09-24 23:01:18 +08:00
feat(curriculum): Added interactive examples to Input Pseudo-classes lesson (#62978)
Thank you for your contribution to the page! 👍 We are happy to accept these changes and look forward to future contributions. 🎉
This commit is contained in:
Ayush Sharma
+114
-16
@@ -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
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<form>
|
||||
<input type="text" />
|
||||
</form>
|
||||
```
|
||||
|
||||
```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
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<form>
|
||||
<input type="text" />
|
||||
</form>
|
||||
```
|
||||
|
||||
```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
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<form>
|
||||
I have read the terms<input class="checkbox" type="checkbox">
|
||||
<label>
|
||||
Agree <input class="checkbox" type="checkbox" />
|
||||
</label>
|
||||
</form>
|
||||
```
|
||||
|
||||
```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
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<form action="#">
|
||||
<label for="name">Name:</label>
|
||||
<input type="text" id="name" name="name" required />
|
||||
@@ -68,43 +135,72 @@ The HTML below has a form with two required input elements:
|
||||
</form>
|
||||
```
|
||||
|
||||
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
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<form>
|
||||
<label for="email">Email:</label>
|
||||
<input type="email" id="email" name="email" />
|
||||
</form>
|
||||
```
|
||||
|
||||
```css
|
||||
input:valid {
|
||||
border-color: green;
|
||||
}
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
Here is an example of using the `:invalid` pseudo-class:
|
||||
|
||||
:::interactive_editor
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<form>
|
||||
<label for="email">Email:</label>
|
||||
<input type="email" id="email" name="email" />
|
||||
</form>
|
||||
```
|
||||
|
||||
```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
|
||||
<label for="name">Name:</label>
|
||||
<input class="text-input" type="text" id="name" name="name" disabled />
|
||||
```
|
||||
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
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<form>
|
||||
<label for="name">Name:</label>
|
||||
<input class="text-input" type="text" id="name" name="name" disabled />
|
||||
</form>
|
||||
```
|
||||
|
||||
```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.
|
||||
|
||||
Reference in New Issue
Block a user