読み出し専用項目のスタイルを指定する

書式

要素名: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;
}
目次に戻る