CSS3 > Selectors

Disabled selector in CSS3

How to apply style of un-editable input text element of HTML in CSS3?

By using Disabled selector we can create the uneditable input text element of HTML. This is mostly used on form elements.

        input {
            background: lightgreen;

        input[type=text]:disabled {
            background-color: seashell;

            <legend>Enter Details</legend>
            <input type="text" value="Username(Enabled)" /><br />
            <input type="Text" value="password(Enabled)" />
            <br />
            Disabled text
            <input type="text" disabled="disabled" value="Sheo Narayan(Disabled)" />

In the above code snippet diabled is applied to the <input> element, the content inside the input text box element remains same, we cannot edit that text. That is shown clearly in the DEMO URL.


In the above output we can edit only the text inside Username and the Password textboxes, we cannot edit the text inside the Disabled text box.

 Views: 808 | Post Order: 13

Write for us