はじめに
inputタグを使っていて、複数のtextタイプにまとめてスタイルを適応させたいけれど、inputでスタイル指定すると、checkboxにまで影響が…。なんてことがあったため、書いておきます。ホントに、基本的なことも知らないんです。笑
Contents
属性セレクタ
CSSには、「属性セレクタ」なるものがあるそうです。これは、その名の通り要素の属性に焦点を当てて、スタイルを指定できるものです。
具体的には、たとえば、次のような要素があったとしましょう。
<a href="https://engideer.com">Engideer</a> <a href="https://engideer.com/archives/category/css"title="CSSアーカイブページ">Engideer|CSS</a>
これに対して、aタグにスタイルをかけると、当然両方に適応されますが、もし、下のほうだけにスタイルを適応させたい場合に、次のように書きます。
a[title]{ border:none; }
こうすると、title属性を持つ方のみにスタイルが適応されます。
まとめると、次のようになります。
要素名[属性名]{プロパティ名:値;}
また、次のように、属性に値を指定することもできます。
要素名[属性名=”値”]{プロパティ名:値;}
inputタグでは、こちらを用いてtype毎にスタイルを指定できます。
input要素における属性セレクタ
先程までのことが分かってしまえば書くまでもないですが、一応。笑
異なるtypeを持った複数のinput要素に、それぞれ違うスタイルを割り当てるには、次のようにします。
input[type="text"]{ margin:20px; } input[type="checkbox"]{ margin:10px; }
こんな感じでですかね。
これらを組み合わせると、submitとbuttonのみに同じスタイルを使ったり、より細かいスタイルの指定が可能ですね。
参考サイト
- 「ポルカの日記 | CSSベースのHTMLレイアウト入門講座」さんの記事「フォームパーツのタイプ別にCSSを利かせる」
- HTMLクイックリファレンス「属性セレクタ」
- All Aboutの記事属性セレクタで、スタイルシートを柔軟に!」
コメントを残す
コメントを投稿するにはログインしてください。