внешний вид текстового поля по умолчанию в Firefox / Safari - PullRequest
Новая
       10

внешний вид текстового поля по умолчанию в Firefox / Safari

3 голосов
/ 03 июля 2010

Firebug утверждает, что текстовое поле без стиля является рамкой: 3px inset # F0F0F0;

Однако <input type="textbox" style="border: 3px inset #F0F0F0;" /> и <input type="textbox" /> создают очень разные границы.Что тут происходит?

Это верно для Safari, Chrome и Firefox - хотя у меня нет IE, поэтому я не знаю об этом.

Ответы [ 2 ]

4 голосов
/ 03 июля 2010

Как это должно работать: если для свойства appearance / -moz-appearance / -webkit-appearance установлено значение, отличное от none- поскольку это для <input type="text"> в таблице стилей по умолчанию в браузере - тогда обычная граница CSS / фон элемента отбрасываются в пользу тематических платформ, которые могут отличаться от плоских трехмерных объектов, предоставляемых простым старым CSS, вплатформы, у которых есть темы. 

<div style="-moz-appearance: textfield">x</div>
<input style="-moz-appearance: none" value="x"/>

Странный и, насколько я могу сказать, недокументированный улов заключается в том, что если какие-либо правила background или border вообще были установлены наэлемента, его -moz-appearance игнорируется и подставляется none, в результате чего получается стиль плоской трехмерной границы, который вы видите в своем примере, - именно так выглядят входные данные без заголовка.

Это верно, даже еслиправила не приводят к другому вычисленному значению этих стилей, чем было бы без них.Только background: default; border: default позволяет избежать запуска этого поведения.

(IE ведет себя аналогично, хотя и не раскрывает стиль appearance. Также пользователи «классической» темы XP / 2000 не увидят разницы, потому чтоIE отображает стили CSS inset / outset border таким образом, что он в любом случае соответствует «классическому» стилю Windows.)

1 голос
/ 03 июля 2010

Различные браузеры в разных операционных системах будут иметь различные стили управления формами по умолчанию в соответствии с пользовательским интерфейсом операционной системы. Как только вы начнете стилизовать любой элемент формы, вы заметите, что браузер также добавит свои собственные стили по умолчанию (которые вы можете переопределить).

Firebug, вероятно, просто сообщает об этом конкретном стиле браузера по умолчанию для текстового поля, но он не виден, так как у них нет других стилей для этого элемента, поэтому вместо него используется интерфейс ОС.

...