Border color on default input style

Question

here's a tricky question...

I have default styled input fields (no css added, just width/height/padding), but now I want to give it a red border (error style). How can I do this? Just setting border will delete the default style of the input, setting only border-color will look weird, setting an outline will work in some cases (and doesn't look so good in Firefox).

Any tips?

EDIT: Come on guys read the question before answering. I want the browser default look of the input, I just want to give it a red border.

Answer 1

I would have thought this would have been answered already - but surely what you want is this: box-shadow: 0 0 3px #CC0000;

Example: http://jsfiddle.net/vmzLW/

Answer 2

You can use jquery for this by utilizing addClass() method

CSS

 .defaultInput     {      width: 100px;      height:25px;      padding: 5px;     }  .error {  border:1px solid red; }  <input type="text" class="defaultInput"/> 

Jquery Code

$(document).ready({   $('.defaultInput').focus(function(){        $(this).addClass('error');   }); }); 

Update: You can remove that error class using

$('.defaultInput').removeClass('error'); 

It won't remove that default style. It will remove .error class only