Chrome/Safari: box-shadow only appears on text input if border is specified

Question

I\'m running into a problem with WebKit browsers (Chrome 15.0.x and Safari 5.1.1) where box shadows are not being rendered on text inputs. Just by chance, I discovered that exp

Answer 1

inputs, in WebKit, have this property applied to them by default:

-webkit-appearance: textfield;

This is what you want if you want the appearance of the text field to be platform-dependent. Sometimes you can style it with this still set, but other times, it needs to be set to none, which makes it apply standard CSS and rely less on the operating system. It seems border automatically triggers this, but box-shadow does not, yet box-shadow is only applied if -webkit-appearance is none. (the fact that the platform-dependent appearance is not turned off if box-shadow is applied and that box-shadow is not rendered if the platform-dependent appearance is enabled may be a bug)

To fix this, simply explicitly tell it to not use the platform-dependent appearance:

input[type="text"] {
    -webkit-appearance: none;
}

Test it with -webkit-appearance: none; added.

The downside of this is you lose (some of) the platform's native look, but if you're trying to use box-shadow, you might be trying to style away the native look anyways.