Read-only selector in CSS3

How to apply style to the form elements which are having read-only attribute in CSS3?

By using read-only selector we can give style to the <form> elements which are having readonly attribute.

<style>
        input:read-only {
            color: red;
            background-color: lightblue;
        }
</style>

<body>
    <form>
        First Name<input type="text" required="required" />*
        <br />
        Last Name<input type="text" required="required" />*
        <br />
        <br />
       Company Name<input type="text" value="SNIT Funda Service LLP" readonly="readonly" />
    </form>
</body>

In the above code snippet we have given style to the read-only selector, so that the read-only selector select the <input> element which is having readonly attribute and applies the style to it.

OUTPUT

Views: 3400 | Post Order: 34

CSS3 > Selectors

Read-only selector in CSS3

How to apply style to the form elements which are having read-only attribute in CSS3?

Related Posts

Utility Tools