CSS :required Selector

CSS :read-write Selector

Last Updated : 29 Aug, 2024

The :read-write selector is used to select an element (such as an input text) that is editable by the user. The elements with no readonly and disabled attribute are defined as readable and writable.

Syntax:

:read-write {
    // CSS Property
}

Example 1:

HTML

<!DOCTYPE html>
<html>

<head>
    <title>:read-write Selector</title>
    <style>
        input {
            min-width: 25em;
            padding: 10px;
        }

        /* CSS property for Firefox only */
        input:-moz-read-write {
            background: green;
            color: white;
        }

        input:read-write {
            background: green;
            color: white;
        }
    </style>
</head>

<body style="text-align:center">
    <h2>
        :read-write Selector
    </h2>
    <input type="text" 
           value="Editable input field">
    <br><br>
    <input type="text" 
           value="This is a read-only input field." readonly>
</body>

</html>

Output: read1 Example 2:

HTML

<!DOCTYPE html>
<html>

<head>
    <title>:read-write Selector</title>
    <style>
        p:-moz-read-write {
            background: green;
        }

        p:read-write {
            background: green;
        }

        p[contenteditable="true"] {
            color: white;
        }
    </style>
</head>

<body style="text-align:center">
    <h2>
        :read-write Selector
    </h2>

    <p>
        This is a normal paragraph
    </p>

    <p contenteditable="true">
        This is editable paragraph!
    </p>

</body>

</html>

Output:

read2 Supported Browsers: The browser supported by :read-write Selector are listed below:

Apple Safari 4.0
Google Chrome 1.0
Edge 13.0
Firefox 78.0
Opera 9.0

CSS :required Selector

V

Vishal Chaudhary 2

Improve

Article Tags :

Similar Reads

CSS [attribute*=value] Selector

The [attribute*="str"] selector targets the elements whose attribute values contain a specified substring. This substring can appear anywhere within the attribute's value â€” beginning, end, or middle. Syntax: element [attribute*="str"] { // CSS Property} Example: In the following example, the <p

CSS [attribute=value] Selector

The [attribute=value] selector in CSS is used to select those elements whose attribute value is equal to "value". Syntax: element [attribute = "value"] { // CSS Property}Note: <!DOCTYPE> must be declared for IE8 and earlier versions. Example 1: In this example, The selector h1[id="geeks"] targ

CSS [attribute$=value] Selector

The [attribute$=â€valueâ€] selector is used to select those elements whose attribute value ends with a specified value "value". The value need not to be present as separate word. It may be a part of another word or expression but it needs to be present at the end. Syntax: [attribute$="value"] { // CSS

CSS [attribute|=value] Selector

The [attribute|=value] selector is used to select those elements whose attribute value is equal to "value" or whose attribute value started with "value" immediately followed by a hyphen (-). Note: Use <!DOCTYPE> to run [attribute|=value] selector in IE8 or earlier versions. Syntax: [attributeT

CSS [attribute~=value] Selector

The [attribute~="value"] selector is used to select those elements whose attribute value contains a specified word. The "value" must be present in the attribute as a separate word and not as part of the other word i.e. if [title~=Geeks] is specified then all elements with Geeks title get selected. S

CSS [attribute^=value] Selector

The [attribute^=value] selector selects elements whose attribute value begins with a given attribute. Syntax: [attribute^=value] { // CSS Property}Example: In this example, The CSS selector p[class^="for"] targets <p> elements with a class attribute that starts with "for" and applies a green b

CSS #id Selector

The ID selector in CSS is used to select a single element on a page by referencing its id attribute. This attribute must be unique within a page, meaning no two elements can have the same id. The ID selector is prefixed with a hash (#) symbol in CSS. Basic ID SelectorThe ID selector allows you to st

CSS * (Universal) Selector

The universal selector (*) applies styles to all elements on a page or within a specified context, regardless of their type, class, or ID. It's commonly used for global resets or universal styling. * { /* styles */}1. Basic Use case of universal selectorThe universal selector applies styles to all e

CSS :active Selector

The: active selector is used in styling an active link of the web page. Style display when the user clicks on the link. This selector is different from :link, :visited and: hover selectors. The main use of : active selector is on the links but it can be used on all elements. Syntax: :active{ //CSS p

CSS ::after Selector

::after selector is used to add the same content multiple times after the content of other elements. This selector is the same as ::before selector. Syntax: ::after{ content:}Below HTMl/CSS code shows the functionality of ::after selector : [GFGTABS] HTML <!DOCTYPE html> <html> <head