はじめに

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のみに同じスタイルを使ったり、より細かいスタイルの指定が可能ですね。

参考サイト