2011-07-28 12 views
3

選択タグは親から継承されていないようですが、それは期待されていますか? この単純なコードで何が間違っていますか?ボックスのCSSプロパティを親から継承しません。

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <style> 
     form 
     { 
      color:#0000cc; 
      font-size: 10px; 
     }  
     </style>   
     <title>Select boxes not affected by its css parent propertieses</title> 
    </head> 

<body> 

<form action="#" method="POST"> 
    <div id="refine_race_search"> 
    <div><label for="test">my_label</label> 
    <select> 
     <option value="1">value 1</option> 
     <option value="1">value 2</option> 
     <option value="1">value 3</option> 
     <option value="1">value 4</option> 
    </select> 
    </div> 
    <input type="submit" value="Send"/> 
    </div> 
</form> 
</body> 
</html> 

答えて

4

フォームコントロールは、フォームエレメントをデフォルトの方法で表示する傾向があるため、一般にCSSエレメントを親エレメントから継承しません。

このように考えてください。黄色い背景と48px本文のウェブサイトを作成した場合、フォームフィールドが48pxと黄色になると思いますか?はい、あなたの特定のケースでは、そのようなフォームフィールド継承は良いことです。ブラウザがそれを実装するためには、Webデザインやユーザーエクスペリエンスの観点からはうまくいかないでしょう。

代わりに何をする必要がありますか?form{form, input, select, button{は、あなたが望むスタイリングを受けるためです。

0

リセットスタイルシートを使用していますか? (http://meyerweb.com/eric/tools/css/reset/)

ブラウザはフォーム要素に多くのデフォルトのスタイルを追加するので、リセットスタイルシートを使用すると役立ちます。

しかし、いくつかのフォーム要素に追加できるスタイリングの量には限界があります(かなりハッキーになることはありません)。

関連する問題