疑似クラス read-only

疑似クラス read-onlyは、 属性 readonlyを持つ入力フィールドのスタイルを設定します。 このような入力フィールドは読み取り専用であり、 つまり、データを入力したり変更したりすることはできませんが、 データを選択してコピーすることは可能です。

構文

cssセレクター:read-only {
  
}

例

読み取り専用の入力フィールドに 薄い灰色の境界線を設定してみましょう:

html<p>
  <label>テキストを入力</label>
  <input type="text">
</p>
<p>
  <label>読み取り専用テキスト</label>
  <input type="text" value="テキスト" readonly>
</p>

cssinput:read-only {
  border: 1px solid #D8DFE8;
}

Результат:

関連項目