Change input form border color

JavaScript
1

i need to change the input form boarder color on click in the input field

<input type="text" name="name" class="form" onfocus="javascript:element.style.border='#000000';">

this is ma code but its not working i don’t know y

2

Try this instead:


<input type="text" name="name" class="form" onfocus="this.style.border='#000000';">
3

k but it changes its color forever i want if the focus went on another form input it comes back to its old stat

4

The best way to do this is unobtrusively.

Place this script in the HEAD section:


<script type="text/javascript">

var ClassName = "effect"; // Note: Elements which you want to target have what class name???
var FocusColor = "#CC0000"; // What color do you want it to change to?

window.onload = function() {
	var inputfields = document.getElementsByTagName("input");
	for(var x = 0 ; x < inputfields.length ; x++ ) {
		if(inputfields[x].getAttribute("class") == ClassName) {
			inputfields[x].onfocus = function() {
				OriginalColor = this.style.border;
				this.style.border = "1px solid "+FocusColor;
			}
			inputfields[x].onblur = function() {
				this.style.border = OriginalColor;
			}
		}
	}	
}
</script>

And for all the input fields you want to have this effect, give them a class of “effect”…

e.g.


<input type="text" name="name" class="effect">
<input type="text" name="email" class="effect">

Using the script above, you can have as many inputs as you want with the effect and there is no inline JS.