How can I apply a background image to a text input without losing the default border in Firefox and WebKit browsers?

When you change border or background style on text inputs They revert back to the very basic rendering mode. Text inputs that are os-style are usually overlays (like flash is) which are rendered on top of the document.

I do not believe there is a pure CSS fix to your problem. Best thing to do – in my opinion – is to pick a style that you like and emulate it with CSS. So that no matter what browser you’re in, the inputs will look the same. You can still have hover effects and the like. OS X style glow effects might be tricky, but I’m sure it is doable.

@Alex Morales: Your solution is redundant. border: 0; is ignored in favor of border: 1px solid #abadb3; and results in unnecessary bytes transferred across the wire.

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)