読み取り/書き込みセレクターおよび:読み取り専用セレクターの使用法の詳細な説明-CSSチュートリアル-php.cn

読み取り/書き込みセレクターおよび:読み取り専用セレクターの使用法の詳細な説明

云罗郡主

リリース： 2018-11-21 17:09:53

転載

2647 人が閲覧しました

この記事では、読み取り/書き込みセレクターと:読み取り専用セレクターの使用方法について詳しく説明します。必要な方は参考にしてください。

:読み取り/書き込みと: 読み取り専用セレクター

Web フォームでは、一部のフォーム要素 (入力ボックス、テキストフィールドなど) に「読み取り/書き込み」と「読み取り」があります。 -only" "これら 2 つの状態。デフォルトでは、これらのフォーム要素は「読み取りおよび書き込み可能」状態にあります。

CSS3 では、:read-write セレクターと :read-only セレクターを使用して、フォーム要素の「読み取り-書き込み」状態と「読み取り専用」状態の CSS スタイルをそれぞれ設定できます。

コード例:

<!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>

ログイン後にコピー

ブラウザでのプレビュー効果は次のとおりです:

読み取り/書き込みセレクターおよび:読み取り専用セレクターの使用法の詳細な説明