書式
要素名:read-only
説明
読み出し専用項目のスタイルを指定するにはread-only擬似クラスを指定します。これによりテキストフィールドで読み出し専用項目にだけスタイルを適用することができます。
●HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3例文辞典サンプル</title>
<link rel="stylesheet" href="css/main.css"">
<body>
<h1>CSS3 Sample</h1>
<p>フォームの読み出し専用項目の背景がグレーになります</p>
<form>
<p>使用OS:<input type="text" name="os" value="iOS" readonly></p>
<p>コメント:<input type="text" name="cmt"></p>
</form>
</body>
</html>
●CSS
input:read-only {
background-color: gray;
}
目次に戻る