スタイルシートの技

フォーム（Form）要素内のボタンやテキストボックスをクールに決める！

テキストフォームにスタイルシートを適応してみる

background2.gif
サンプル画像 
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; 
      charset=Shift_JIS">
   <meta http-equiv="content-style-type" content="text/css">
   <title>input要素のサンプル</title>
   <style type="text/css">
      *.typeA
      {
         border: solid 1px #666666;
      }
      *.typeB
      {
         border: solid 1px #000099;
         background-color: #ffff00;
      }
      *.typeC
      {
         color: #ffffff;
         border: solid 1px #000000;
         background-image: url('./bgblackstripe.gif');
      }
   </style>
</head>
<body>
   <h1>input要素のサンプル</h1>
   <dl>
      <dt>Type-A</dt>
         <dd><input type="text" name="A" class="typeA"></dd>
      <dt>Type-B</dt>
         <dd><input type="text" name="B" class="typeB"></dd>
      <dt>Type-C</dt>
         <dd><input type="text" name="C" class="typeC"></dd>
   </dl>
</body>
</html>
Type-A
Type-B
Type-C

このようにinput要素に対してもスタイルシートの適応が可能です。 textareaでも同様な結果が得らますので確認してみてください。

top

ドロップダウンメニューにスタイルシートを適応しても…

ドロップダウンメニューの場合にはスタイルシートは適応されません。 スタイルシートの部分は固定でHTMLのbody部分だけを記述します。

<body>
   <h1>ドロップダウンメニューの場合</h1>
   <select class="typeA">
      <option selected="selected">(選曲して下さい。)</option>
      <option>アゲ♂アゲ♂EVERY☆騎士</option>
      <option>純情 〜スンジョン〜</option>
      <option>ケジメなさい</option>
      <option>ニホンノミカタ</option>
   </select>
   <select class="typeB">
      <option selected="selected">(選曲して下さい。)</option>
      <option>リバーサイドホテル</option>
      <option>少年時代</option>
      <option>ワインレッドの心</option>
      <option>Make-up Shadow</option>
   </select>
   <select class="typeC">
      <option selected="selected">(選曲して下さい。)</option>
      <option>少女Ａ</option>
      <option>十戒</option>
      <option>ミ・アモーレ</option>
      <option>DESIRE〜情熱〜</option>
   </select>
</body>

このようになりました。フォント色は変わりますが、背景色と背景画像は適応されません。 これはOperaでも同じです。なので、ドロップダウンメニューの場合には注意しましょう。

top

ボタンにスタイルシートを適応

ボタンにはinput要素で指定するタイプとbutton要素で指定するタイプがありますが、 button要素の方がより詳細な設定が可能です。 しかし、ブラウザ依存の面からボタンはinput要素を使う方が安全と言えます。 スタイルシートは上記のものを使い回ししてみましょう。

<body>
   <h1>ボタンにスタイルシートを適応した場合</h1>
   <p>
      <input type="button" value="type-A" class="typeA" />
      <input type="button" value="type-B" class="typeB" />
      <input type="button" value="type-C" class="typeC" />
   </p>
</body>

ちなみに言い忘れていましたが、 「HTML 4.01 Transitional」ではbody要素の子要素としてinput要素は取れますが、 「HTML 4.01 Strict」ではbody要素の子要素としてinput要素は取れません。 これはbr要素などにも同じ事が言えます。

top