2つの入力の背景色が異なるのはなぜですか？

Question

私は入力の背景色を指定していませんでしたが、1つはグレー、もう1つは白です。なぜですか？

<style> 
.baken { 
    border:1px solid #888888; 
    font-family:Trebuchet MS,Helvetica,sans-serif; 
    font-size:130%; 
    font-weight:bold; 
    margin:3px; 
    padding:2px; 
} 

</style> 


<input type="button" class="baken" value="answer your question"/> 

<input type="button" value="hello button"/> 

Answer 1

DOMインスペクタで他の場所の色を継承しているかどうかを確認する必要があります。ボタンの上の境界線を指定することにより

Answer 2

は、それはあなたがでこれを見ることができます

（灰色のようです）いくつかのデフォルトにそれを戻す、削除するボタンのデフォルトのオペレーティング・システム固有のスタイルを引き起こしあなたのクラスからborderを削除してください。

Answer 3

borderを指定すると、ブラウザはオペレーティングシステムのテーマを使用するのではなく、基本的なビジュアルスタイルを使用してボタン自体をレンダリングします。 borderスタイルを削除すると、他のボタンのように見えます。

Answer 4

境界ビットとは別に、入力の1つがclass="baken"を使用して定義され、もう1つがそうでないことに注意してください。したがって、最初の入力ボタンは、上で定義したスタイルを使用します。もう一方はブラウザのデフォルトを使用するか、タグレベルのinputスタイルを定義している場合は、定義済みのスタイルを使用します。

両方の入力にbakenクラスが使用されている場合は、テキストと同じように見え、基本的なクリック可能な灰色のボックスになります。

いずれもbakenクラスを使用していない場合は、テキストと同じで、ブラウザのデフォルトまたはinputのタグ定義のデフォルトスタイルになります。