idやclassなしでテキストボックスやsubmitボタンにCSSを適用するには？

Webページの閲覧者に検索やコメントを入力、送信してもらうには、Webページ上にテキストボックス（＝テキスト入力枠）や submit ボタン（＝［送信］ボタンや［検索］ボタン）などの<input>要素（以降、まとめて「コントロール要素」と呼びます）を配置します。しかし、これらのコントロール要素はサイトのデザインと必ずしもマッチしていないことがあり、よりサイトに合ったデザインに変更したい場合があります。このようなときには（基本的に）CSSを使います（この記事ではCSSの使い方の説明は割愛します）。

コントロール要素にCSSを適用するには、まずは目的のコントロール要素を特定する必要があります。これを行うためには、通常、そのコントロール要素にid属性もしくはclass属性を付け、それを利用します。

例えば、次のようなHTMLコードで、submit ボタンが配置されているとします。

<div id="search-box">
  <input type="submit" name="sa" value=" 検索" id="search_submit"></input>
</id>

この場合、次のようなCSSコードにより、submit ボタンのデザイン内容をカスタマイズできます。

#search-box input#search_submit {
  ＜デザイン内容の変更するコード＞
}

このCSSでは、
  id属性（#）が「search-box」の内部（＝半角スペース）にある「input」要素で、しかもid属性（#）が「search_submit」の要素
というふうに、コントロール要素を特定しているわけです（ちなみにclass属性の場合は「#」の代わりに、「.」を使います）。

通常はこれで問題ないわけですが、事情によりid属性やclass属性が使えない場合があります。例えば、Google AdSenseの検索コードを使っている場合には、コード内容の改変が禁止されているため、id属性やclass属性が使えないことがあります。

そのような場合に、目的のコントロール要素を特定して、CSSを適用する方法を紹介します。

その方法とは

<input>要素のtype属性を使う方法です。

* ただし、Internet Explorer 6 では動作しません。以下のブラウザでは動作することを確認できました。
　１．Microsoft Internet Explorer 7 以降
　２．Firefox 2.0 以降
　３．Safari 3.1.1 以降
※OSはWindowsを使って検証しています。

具体例を示しましょう。次の画面はCSSが適用されていない状態です。

テキストボックスの枠が短く、ボタンが標準のままです。

このWebページのHTMLコードには、次のように、テキストボックスとsubmit ボタンが記述されています。

<div id="search-box">
  <input type="text" name="q" size="28" />
  <input type="submit" name="sa" value="検索" />
</id>

このコードを見ると、id属性やclass属性がありません。なので、冒頭で示した方法ではデザインを変更できません。

そこでtype属性を使います。CSSに次のようなコードを記述します。

#search-box input[type="text"] {
margin: 0;
padding: 0;
width: 210px;
}

#search-box input[type="submit"] {
background-color: #000000;
border-bottom: 2px solid #666666;
border-left: 2px solid #CCCCCC;
border-right: 2px solid #666666;
border-top: 2px solid #CCCCCC;
color: #FFFFFF;
font-family: "ＭＳ Ｐゴシック", "平成角ゴシック", verdana, arial, sans-serif;
font-size: small;
font-weight: normal;
margin: 0;
padding: 0;
text-align: center;
vertical-align: baseline;
width: 50px;
}

このCSSにあるボタンの方のコードでは、
  id属性（#）が「search-box」の内部（＝半角スペース）にある「input」要素で、しかもtype属性（[type="<値>"]）の値が「submit」の要素
というふうにして、コントロール要素を特定を特定しています。

このようにid属性やclass属性以外を指定したいときは
  input[type="submit"]
  要素名[属性名="<値>"]
と指定すればよいわけです。この手法は「属性セレクタ」と呼ばれます。

このCSSにより、テキストボックスの枠は固定幅で長くなり、ボタンのデザインが変更されます。

なお、<input>要素のname属性を使っても同様の処理が可能です。その場合、先ほどのHTMLコードではname属性は「sa」となっていたので、下記のようなCSSコードになります。

#search-box input[name="sa"] {
  ＜デザイン内容の変更するコード＞
}

しかし、name属性の値が変更された場合に、再度修正が必要になる可能性があり、前述のtype属性を使う方法よりも変更に弱くなってしまいます。

なお、以上で説明した方法は、Windows XP上のInternet Explorer 7、Firefox 2.0、Safari 3.1で試したので、大半のブラウザがサポートしていると思いますが、必ずしもすべてのブラウザがサポートしているとは限りませんので、その点、ご注意ください。