Skip to content

Commit

Permalink
pseudo class description (#36261)
Browse files Browse the repository at this point in the history
* pseudo class description changes

* review comments

Co-authored-by: Chris Mills <chrisdavidmills@gmail.com>

---------

Co-authored-by: Chris Mills <chrisdavidmills@gmail.com>
  • Loading branch information
gagan-bhullar-tech and chrisdavidmills authored Oct 10, 2024
1 parent eb061bd commit 90b468a
Showing 1 changed file with 2 additions and 2 deletions.
4 changes: 2 additions & 2 deletions files/en-us/learn/forms/ui_pseudo-classes/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -438,7 +438,7 @@ You can see the example in action below (also [see it live here](https://mdn.git

### Read-only and read-write

In a similar manner to `:disabled` and `:enabled`, the `:read-only` and `:read-write` pseudo-classes target two states that form inputs toggle between. Read-only inputs have their values submitted to the server, but the user can't edit them, whereas read-write means they can be edited — their default state.
In a similar manner to `:disabled` and `:enabled`, the `:read-only` and `:read-write` pseudo-classes target two states that form inputs toggle between. As with disabled inputs, the user can't edit read-only inputs. However, unlike disabled inputs, read-only input values will be submitted to the server. Read-write means they can be edited — their default state.

An input is set to read-only using the `readonly` attribute. As an example, imagine a confirmation page where the developer has sent the details filled in on previous pages over to this page, with the aim of getting the user to check them all in one place, add any final data that is needed, and then confirm the order by submitting. At this point, all the final form data can be sent to the server in one go.

Expand All @@ -453,7 +453,7 @@ A fragment of the HTML is as follows — note the readonly attribute:
</div>
```

If you try the live example, you'll see that the top set of form elements are not focusable, however, the values are submitted when the form is submitted. We've styled the form controls using the `:read-only` and `:read-write` pseudo-classes, like so:
If you try the live example, you'll see that the top set of form elements are not editable, however, the values are submitted when the form is submitted. We've styled the form controls using the `:read-only` and `:read-write` pseudo-classes, like so:

```css
input:read-only,
Expand Down

0 comments on commit 90b468a

Please sign in to comment.