Reset an input control's border color (HTML/Javascript)

Don't do it with setting style attributes. Do it by using CSS classes. I would also recommend using a Javascript library to handle this. It just makes the code cleaner.

Removing CSS attributes is problematic because you don't always know what they should be set back to. Adding and removing classes just... works.

You can have multiple classes per element so there's really no argument against doing it this way (imho).

I'm used to jQuery so my example is with that.

Wrong way:

$("#myinput").css("border", "1px solid red");

Right way:

<style type="text/css">.redborder { border: 1px solid red; }</style><script type="text/javascript">$("#myinput").addClass("redborder");$("#myinput").removeClass("redborder");$("#myinput").toggleClass("redborder");</script>

This works for me:

document.getElementById('myinput').style.removeProperty('border');

Do you simply want the border to go away? I don't think so, as you have stated that is not the case.

The proper way to "reset" is to set to default. I am not sure what the default is, but I would guess something like '1px black' or similar.

I commonly use this technique in a variety of applications. When i do not know the default, I will set my own "default" so I can repeat it. One of my favorite techniques, with web pages, is to set the background color of the control, rather than the border. It is very visible and you can choose a more muted color and still have impact. In that case, it is very easy to set background back to white, which is the default.