「:読み取り専用」疑似クラスセレクタは、読み取り専用のスタイル要素を指定するために使用されます。単純なポイントは、「読み取り専用= 『読み取り専用』」集合の要素であると理解されます
例ショー
スタイルセレクターを設定するためのテキストボックスをアドレス:「読み取り専用」。
HTMLコード:
<form action="#">
<div>
<label for="name">姓名:</label>
<input type="text" name="name" id="name" placeholder="大漠" />
</div>
<div>
<label for="address">地址:</label>
<input type="text" name="address" id="address" placeholder="中国上海" readonly="readonly" />
</div>
</form>
CSSコード:
form {
width: 300px;
padding: 10px;
border: 1px solid #ccc;
margin: 50px auto;
}
form > div {
margin-bottom: 10px;
}
input[type="text"]{
border: 1px solid orange;
padding: 5px;
background: #fff;
border-radius: 5px;
}
input[type="text"]:-moz-read-only{
border-color: #ccc;
}
input[type="text"]:read-only{
border-color: #ccc;
}