Three.jsを使って、作ってみた

プログラミング関連の事を色々書いています(^^) 週末はレストランやコンビニのお菓子のことを書いています。

CSS3 セレクタを使い、少しフォームを改良する

今回は、CSS3のセレクタを使い、少しだけフォームを改良する方法を書きます。


このような簡単なフォームを作りました↓

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>css3</title>
</head>
<body>
	<div>
		<h1>h1</h1>
		<p>名前:<input type="text" name="name" value="tanaka" disabled></p>
		<p>メールアドレス:<input type="text" name="email"></p>
		<p>
			<input type="radio" name="r1" value="1"> <label>りんご</label>
			<input type="radio" name="r2" value="2"> <label>みかん</label>
		</p>
	</div>
</body>
</html>

f:id:gupuru:20140406133541p:plain


では、CSS3のセレクタを使い少しだけ改良します。

  • disabled

disabledがついているフィールドにスタイルをあてます。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>css3</title>
	<style>
		input[type="text"]:disabled{
			border: 2px solid orange;
		}
	</style>
</head>
<body>
	<div>
		<h1>h1</h1>
		<p>名前:<input type="text" name="name" value="tanaka" disabled></p>
		<p>メールアドレス:<input type="text" name="email"></p>
		<p>
			<input type="radio" name="r1" value="1"> <label>りんご</label>
			<input type="radio" name="r2" value="2"> <label>みかん</label>
		</p>
	</div>
</body>
</html>

f:id:gupuru:20140406134247p:plain
オレンジ色に変わりました。

「input[type="text"]:disabled」という感じにすると、disabledがついているフィールドにスタイルをあてることができます。

もちろん、「input[type="text"]:enabled」とすると、
f:id:gupuru:20140406134440p:plain
こうなります。

  • checked

「checked」になったものにスタイルをあてます。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>css3</title>
	<style>
		input[type="radio"]:checked + label{
			color: red;
		}
	</style>
</head>
<body>
	<div>
		<h1>h1</h1>
		<p>名前:<input type="text" name="name" value="tanaka" disabled></p>
		<p>メールアドレス:<input type="text" name="email"></p>
		<p>
			<input type="radio" name="r1" value="1"><label>りんご</label>
			<input type="radio" name="r2" value="2"><label>みかん</label>
		</p>
	</div>
</body>
</html>

f:id:gupuru:20140406134720p:plain
「みかん」が赤色に変わります。
「input[type="radio"]:checked + label」という感じにすると、「checked」になったものの隣の「 label」要素にスタイルをあてることができます。

「+」を使うと、隣の要素にスタイルをあてることができます。


簡単でしたが、これで終わります。