Skip to content

Commit

Permalink
Stop calling inputs replaced elements (#34273)
Browse files Browse the repository at this point in the history
  • Loading branch information
Josh-Cena authored Jun 20, 2024
1 parent 335dda2 commit b9f3d08
Show file tree
Hide file tree
Showing 2 changed files with 4 additions and 2 deletions.
2 changes: 1 addition & 1 deletion files/en-us/learn/forms/advanced_form_styling/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -377,7 +377,7 @@ select {
}
```

We then created our own icon using generated content. We put an extra wrapper around the control, because [`::before`](/en-US/docs/Web/CSS/::before)/[`::after`](/en-US/docs/Web/CSS/::after) don't work on `<select>` elements (this is because generated content is placed relative to an element's formatting box, but form inputs work more like replaced elements — their display is generated by the browser and put in place — and therefore don't have one):
We then created our own icon using generated content. We put an extra wrapper around the control, because [`::before`](/en-US/docs/Web/CSS/::before)/[`::after`](/en-US/docs/Web/CSS/::after) don't work on `<select>` elements (because their content is fully controlled by the browser):

```html
<label for="select">Select a fruit</label>
Expand Down
4 changes: 3 additions & 1 deletion files/en-us/learn/forms/ui_pseudo-classes/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -147,6 +147,8 @@ input[type="radio"]:checked::before {

This is really useful — screen readers already let their users know when a radio button or checkbox they encounter is checked/selected, so you don't want them to read out another DOM element that indicates selection — that could be confusing. Having a purely visual indicator solves this problem.

Not all `<input>` types support having generated content put on them. All input types that show dynamic text in them, such as `text`, `password`, or `button`, don't display generated content. Others, including `range`, `color`, `checkbox`, etc., display generated content.

Back to our required/optional example from before, this time we'll not alter the appearance of the input itself — we'll use generated content to add an indicating label ([see it live here](https://mdn.github.io/learning-area/html/forms/pseudo-classes/required-optional-generated.html), and see the [source code here](https://github.com/mdn/learning-area/blob/main/html/forms/pseudo-classes/required-optional-generated.html)).

First of all, we'll add a paragraph to the top of the form to say what you are looking for:
Expand All @@ -157,7 +159,7 @@ First of all, we'll add a paragraph to the top of the form to say what you are l

Screen reader users will get "required" read out as an extra bit of information when they get to each required input, while sighted users will get our label.

Since form inputs don't directly support having generated content put on them (this is because generated content is placed relative to an element's formatting box, but form inputs work more like replaced elements and therefore don't have one), we will add an empty [`<span>`](/en-US/docs/Web/HTML/Element/span) to hang the generated content on:
As previously mentioned, text inputs don't support generated content, so we add an empty [`<span>`](/en-US/docs/Web/HTML/Element/span) to hang the generated content on:

```html
<div>
Expand Down

0 comments on commit b9f3d08

Please sign in to comment.