にしし ふぁくとりー(西村文宏 個人サイト)

"CSS Tips Factory" : Presented by Nishishi. Since 1997.

input要素のうち、ボタンだけを対象にして装飾するCSS [フォーム]

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

もし、以下のようにCSSソースを書いたとすると、

input {
   background-color: green;
   color: white;
   border: 1px solid blue;
}

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

CSS適用前:

CSS適用後:

ボタンだけでなく、テキスト入力欄も含めて一括装飾してしまうことになります。
これでは、何が何だか分かりません。

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

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

CSSソースで、装飾対象を示す部分のことを「セレクタ」と呼びます。たいていは、要素名、class名、id名などを記述します。
が、セレクタには、属性名や属性値を追加することもできます。例えば以下のように。

input[type="button"] {
   background-color: green;
   color: white;
   border: 1px solid blue;
}

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

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

……だけを対象にする、となります。
これを使って表示すると、以下のようにボタンだけを対象にして装飾ができるようになります。

CSS適用前:

CSS適用後:

上記では、「ボタン!」と書かれたボタンだけが対象に装飾されているはずです。(※属性セレクタに対応していない、すごく古いブラウザは除きますが。)

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

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

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

input[type="button"],
input[type="submit"] {
   background-color: green;
   color: white;
   border: 1px solid blue;
}

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

《2016/03/18 16:03 改訂》
《2014年6月20日 10:25 初版公開》

()

▼当サイト内外で関連しそうな記事などを自動表示:

スタイルシートTipsふぁくとりーの主要なカテゴリ

現在、以下のカテゴリに区分してスタイルシートに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。

▲各カテゴリ毎に、TIPSのタイトルと概要を一覧できます。ぜひ、いろいろ覗いてみて下さい!

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi にしし/西村文宏 on Google+ フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連するかもしれない情報

--- 当サイト内を検索 ---