input要素のうち、ボタンだけを対象にして装飾したい場合もある

入力欄やチェックボックスやボタンなど、フォームを構成する部品はたいていinput要素を使って作ります。それが入力欄になるのかボタンになるのかは、type属性の値で決まります。この仕様は、スタイルシートでデザインする際にはちょっと困ります。
例えば、ボタンの表面の色だけを指定したいのに、そのままinput要素に対して背景色を指定してしまうと、ボタンだけでなくテキスト入力欄などの背景色まで変わってしまいます。

もし、以下のようにinput要素すべてに対して装飾するようなCSSソースを書いてしまうと、

input {
   /* input要素全部に対して装飾 */
   background-image: linear-gradient(0deg, #a7d9f5, #eaf6fd); /* グラデーション */
   border: 1px solid #3c7fb1; /* 枠線 */
   border-radius: 0.3em;      /* 角丸 */
}
input:hover {
   /* マウスが上に載ったとき */
   background-image: linear-gradient(0deg, #68d3db, #e5f4fc);
   border: 1px solid #2c628b;
}
input:active {
   /* 押されたとき */
   background-image: linear-gradient(180deg, #68d3db, #e5f4fc);
   border: 1px solid skyblue;
}

当然、表示は以下(の下側)のようになってしまいます。

上記サンプルの下側で示したように、本来意図したボタンだけではなく、テキスト入力欄も含めて一括装飾してしまうことになります。
これでは、何が何だか分かりません。

フォームを構成する様々な部品をinput要素で作っている場合、ボタンだけに限定して装飾したいのなら、スタイルシートでの装飾対象を「input要素のうち、type属性の値がボタンを作る値になっているもの」に限定する必要があります。
そのような属性値を基準にした限定方法を可能にするCSSの書き方が、属性セレクタです。とても簡単です。

属性セレクタを使えば、ボタンだけに限定して装飾できる

スタイルシートの文法では、装飾対象を示す部分のことを「セレクタ」と呼びます。たいていは、要素名、class名、id名などを記述します。
しかし、このセレクタには「属性名」や「属性値」を使って対象にしたい要素を特定することもできます。例えば以下のように書きます。

input[type="button"] {
   /* input要素のうちtype属性値がbuttonのものに対して装飾 */
   background-image: linear-gradient(0deg, #a7d9f5, #eaf6fd); /* グラデーション */
   border: 1px solid #3c7fb1; /* 枠線 */
   border-radius: 0.3em;      /* 角丸 */
}

上記ソースに記述したセレクタ「input[type="button"]」の意味は、

• input要素のうち、
• type属性の値が、
• 「button」であるもの

です。このように記述すると、この条件に合致する要素だけを対象に装飾することになります。
これを使えば、以下のようにボタンだけを対象にして装飾ができるようになります。

上記では、「ボタン！」と書かれたボタンだけが対象に装飾されているはずです。
※属性セレクタに対応していない、すごく古いブラウザは除きますが。(そこまで古いブラウザの存在はもはや無視して差し支えないでしょう。)

ちなみに、マウスが載った際や押下された際の装飾(hover疑似クラスやactive疑似クラス)に対しても、下記のように属性セレクタを付加できます。上記の表示例では、以下のCSSソースも適用されています。

input[type="button"]:hover {
   /* マウスが載ったとき */
   background-image: linear-gradient(0deg, #68d3db, #e5f4fc);
   border: 1px solid #2c628b;
}
input[type="button"]:active {
   /* クリックされたとき */
   background-image: linear-gradient(180deg, #68d3db, #e5f4fc);
   border: 1px solid skyblue;
}

上記の9行目や14行目のように、属性セレクタの後に「:」記号を打ってから疑似クラスを指定できます。

ボタンを作る属性値は「button」と「submit」

ちなみに、input要素でボタンを作るためのtype属性値は「button」だけでなく「submit」もあります。
フォームに入力したデータをCGIなどに送りたい場合などに使う「送信ボタン」は、type属性値の値を「submit」にします。

先ほどの例のように、属性セレクタを使って「input[type="button"]」と書いただけでは、送信ボタン(Submitボタン)が装飾対象になりません。
送信ボタンも合わせて装飾対象にしたい場合は、以下のようにカンマ記号で区切って2つセレクタを指定します。

input[type="button"],
input[type="submit"] {
   /* ～ボタン用の装飾～ */
}

もし、「送信ボタン」のデザインと、「それ以外の汎用ボタン」のデザインを分離したい場合は、もちろん下記のように分けて書くこともできます。

input[type="button"] {
   /* ～一般のボタン用の装飾～ */
}
input[type="submit"] {
   /* ～送信ボタン専用の装飾～ */
}

属性セレクタに記述する値は「type」や「button」に限りません。どんな属性名・属性値でも指定できます。
なお、フォームを構成する部品の内、「テキスト入力欄」(type属性の値がtextであるinput要素)に限定して装飾した例については、別途記事「フォーカスのあるフォームの装飾を変化させる」でも紹介しています。

(更新日：2017年07月04日)