All geek questions in one place

The appearance of the default text box in firefox / safari

Firebug claims that an unencrypted text field is a border: 3px insert # F0F0F0;

However <input type="textbox" style="border: 3px inset #F0F0F0;" />, <input type="textbox" />they create very different facets. What's going on here?

This is true in Safari, Chrome, and Firefox. I do not have IE, so I do not know about it.

+3
source share
2 answers

How it should work: if / / the property is set to something other than -as it to the browser default style sheets, the normal CSS border / background element are discarded in favor of the thematic orientation of the platform, which may be different from the flat three-dimensional objects, provides a simple old CSS, on platforms with themes. appearance -moz-appearance -webkit-appearancenone<input type="text">

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

The incomprehensible trick “as far as I can tell” is that if any rules were set for an element backgroundor borderit is -moz-appearanceignored and nonenot substituted, resulting in a flat -3D frame style, which you see in your example, looks exactly like this input without header.

, , . background: default; border: default background: default; border: default .

(IE , appearance . XP/2000 " , IE CSS inset/outset , " Windows .)

+4

. , , , ( ).

Firebug, , , , , .

+1

Source: https://habr.com/ru/post/1752903/

More articles:


All Articles