如何清除和固定边框

Question

I've added a red border to my input boxes on error generated during form validation

 <input id="cardnumber" />

The border is set to red in my javascript using:

 $(cardnumber).css({ "border":' solid #ff0000'})

Now I would like to clear the solid border when the user resolves the error:

I tried:

 $(cardnumber).css({"outline":'none'})
 $(cardnumber).css({"outline":'0'})

None of of the above works.

Whats the correct css to reset the border?

Answer 1

Set the border to none :

$(cardnumber).css({"border-color":'black'});

But rather than changing CSS explicitly, it's generally better to use classes and put the styles in your CSS file.

Answer 2

Try border: none;

Outline is not the same as border

Answer 3

Keep the value of the border css before the error in a variable and reapply after:

$borderbefore = document.getElementById('cardnumber').style.border;
...
//error
 $(cardnumber).css({ "border":' solid #ff0000'})
...
//correction
document.getElementById('cardnumber').style.border = $borderbefore;