Detailed explanation of the usage of read-write and :read-only selectors-CSS Tutorial-php.cn

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

云罗郡主

Release： 2018-11-21 17:09:53

forward

2541 people have browsed it

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>

Copy after login

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!