Why do text inputs change their border attributes when a background color is applied?

Question

Here\'s an example, I\'m looking at in in FF 3.6 and the input with background: transparent has a different border to the untouched one.

http://jsfiddl

Answer 1

Like the others said, this is due to default OS styling that is cleared as soon as you add any properties. You can mimick the default styling with CSS, though it would probably be overkill to do an OS detection and apply different CSS rules accordingly. Instead you could choose an OS styling that you like and apply that as the default for all text-inputs. Mac OSX styling can be reasonably reproduced with the following CSS:

#background {
    background: transparent;
    border:1px solid #ffffd;
    padding:2px;
    -webkit-box-shadow:inset 0px 1px 2px #333;
    -moz-box-shadow:inset 0px 1px 2px #333;
    box-shadow:inset 0px 1px 2px #333;
}
​

Season to taste.