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

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

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

input要素で作るフォーム部品のうちボタン(button)に限定して装飾したい場合は、単にinput要素に対してCSSを指定するのでは実現できません。input要素ではボタン以外にもチェックボックスやテキスト入力欄なども作りますから。そんな場合には属性セレクタが便利です。これを活用すれば、「input要素のうち、type属性の値がbuttonな要素」などのように対象を限定してスタイルを適用できます。

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

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

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

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;
}

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

CSS適用前:

CSS適用後:

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

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

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

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

CSSソース

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」であるもの

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

CSS適用前:

CSS適用後:

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

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

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つセレクタを指定します。

CSSソース

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

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

CSSソース

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

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


()

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

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

著者紹介


にしし(西村文宏)

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

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

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

著書一覧と詳細

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

▼当サイト内外で関連しそうな記事などが自動表示されています。(たぶん)

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