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>
では、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>
オレンジ色に変わりました。
「input[type="text"]:disabled」という感じにすると、disabledがついているフィールドにスタイルをあてることができます。
もちろん、「input[type="text"]:enabled」とすると、
こうなります。
- 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>
「みかん」が赤色に変わります。
「input[type="radio"]:checked + label」という感じにすると、「checked」になったものの隣の「 label」要素にスタイルをあてることができます。
「+」を使うと、隣の要素にスタイルをあてることができます。
簡単でしたが、これで終わります。