Почему цвет фона двух входов был разным?

Question

Как видно, я не указал цвет фона ввода, но один серый, а другой белый, почему?

<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

Указав границу на кнопке, она вызывает удаление для кнопки стилей, специфичных для операционной системы по умолчанию, возвращая ей значение по умолчанию (которое кажется серым)

Вы можете увидеть это в действии, удалив border из вашего класса.

Answer 2

Поскольку указание border заставляет браузер отображать саму кнопку, используя базовый визуальный стиль, а не темы операционной системы. Удалите стиль border, и он будет выглядеть как другая кнопка.

Answer 3

Еще одна вещь, на которую следует обратить внимание, кроме бита границы, состоит в том, что один из входов определяется с помощью class="baken", а другой - нет. Следовательно, первая кнопка ввода будет использовать стиль, который вы определили и покажите выше; другой будет использовать браузер по умолчанию или, если вы определили стиль тега input, определенный стиль.

Если бы оба ваших ввода использовали класс baken, они выглядели бы одинаково, кроме текста, и были бы простыми серыми прямоугольниками с кликабельными границами и границами.

Если ни один из них не использовал класс baken, они выглядели бы идентично, кроме текста, и были бы стилем по умолчанию для браузера или input определенным тегом стилем по умолчанию.

Answer 4

Вам следует попробовать инспектор DOM, чтобы узнать, не наследует ли он цвета откуда-либо еще.