Home > Article > Web Front-end > Detailed explanation of the usage of read-write and :read-only selectors

Detailed explanation of the usage of read-write and :read-only selectors

云罗郡主forward: 2018-11-21 17:09:532520browse

This article brings you a detailed explanation of the usage of read-write and :read-only selectors. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

:read-write and: read-only selector

In Web forms, some form elements (such as input boxes, text fields, etc.) have "read-write" and "read-only" "These two states. By default, these form elements are in the "readable and writable" state.

In CSS3, we can use the :read-write selector and :read-only selector to set the CSS styles of the "read-write" and "read-only" states of the form element respectively.

Code example:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS3 :read-write与:read-only选择器</title>
    <style type="text/css">
        input[type="text"]:read-write
        {
            outline:1px solid #63E3FF;
        }
        input[type="text"]:read-only
        {
            background-color:#EEEEEE;
        }
    </style>
</head>
<body>
    <form>
        <p><label for="text1">读写:</label><input type="text" name="text1"/></p>
        <p><label for="text2">只读:</label><input type="text" name="text2" readonly="readonly"/></p>
    </form>
</body>
</html>

The preview effect in the browser is as follows:

Detailed explanation of the usage of read-write and :read-only selectors

The above is the selection of read-write and:read-only A complete introduction to the detailed usage of the tool. If you want to know more about CSS3 tutorial, please pay attention to the PHP Chinese website.

The above is the detailed content of Detailed explanation of the usage of read-write and :read-only selectors. For more information, please follow other related articles on the PHP Chinese website!

Statement：

This article is reproduced at:lvyestudy.com. If there is any infringement, please contact admin@php.cn delete

Previous article：How to use disabled and enabled? Detailed explanation of disabled and enabledNext article：How to use disabled and enabled? Detailed explanation of disabled and enabled

See more

Detailed explanation of the usage of read-write and :read-only selectors

Related articles