CSS 参考手册

CSS @规则(RULES)

CSS 属性大全

CSS関数（Functions）CSSセレクタ全書

CSS :read-only選択子

:read-only CSS 伪類が要素がユーザー編集不可の状態（例えばロックされたテキストエディタ）を示します。

完全なCSS選択子リファレンスマニュアル

オンラインサンプル

input要素に「readonly」属性を設定し、背景色を緑色に設定した：

例

<!DOCTYPE　html>
<html>
<head>
<meta　charset="utf-8">　
<title>基本チュートリアル(oldtoolbag.com)</title>/title>　
<style>
input　{　min-width:　25em;　}
input:-moz-read-only　{　background:　cyan;　}
input:read-only　{　background:　cyan;　}
p:-moz-read-only　{　background:　lightgray;　}
p:read-only　{　background:　lightgray;　}
p[contenteditable="true"]　{　color:　blue;　}
</style>
</head>
<body>
<input　type="text"　value="ここにあなたが入力したいどんなものでも入力できます.">
<input　type="text"　value="読み取り専用."　readonly>
<p>普通の段落.</p>/p>
<p　contenteditable="true">編集可能な段落!</p>/p>
</body>
</html>

テストをしてみる ‹/›

定義と使用

:read-only 選択子はreadonly属性が設定された要素を選択します。

フォーム要素はreadonly属性を設定して、要素が読み取り専用であることを定義できます。

注意： 現在、大多数のブラウザでは、　:read-only 選択子は input と textarea 要素に適用されますが、readonly属性が設定された要素にも適用されます。

ブラウザの互換性

テーブルの数字は、その属性をサポートする最初のブラウザバージョン番号を示します。

選択子
:read-only	サポートしています	サポートしていません	-moz-	はい	はい

CSS 文法

/*　Firefoxでサポートするために、読み取り専用のinput要素を選択するには、-moz接頭辞　*/
input:-moz-read-only　{
　　background-color: #ccc;
}
input:read-only　{
　　background-color: #ccc;
}

注意：この選択子はreadonly属性を持つ<input>要素を選択するだけでなく、ユーザーが編集できないすべての要素を選択します。