onfocus for form input to change border colour?

Question

I'm trying to add a colour border to a form field when a user clicks on the field, I'm good at html and javascript, with a bit of php, but my css is actually quite poor. The code for the form etc is below. I would really appreciate if anyone could direct or help me. CODE:

<form id="search" action="http://www.bkslap.com/search/results.php" id="cse-search-box">
<input name="q" type="text" id="q" autocomplete="on" size="56"  style="color:#ccc;" maxlength="128" id="q"
onblur="this.value = this.value || this.defaultValue; this.style.color = '#ccc';"
onfocus="this.value=''; this.style.color = '#9933FF';"
value="Search" />
</form>

Any thoughts?

Answer 1

It'd probably be cleaner to add and subtract a class with the onBlur and onFocus. Then in the css class you could have:

.focus {
background: yellow;
color: #000;
border: 1px solid red;
}

Check here for more information on the border properties. (with apologies to those who hate w3schools, but it's a reasonable place for this type of reference).

http://www.cssdrive.com/index.php/examples/exampleitem/focus_pseudo_class/

Answer 2

Just use css for outline color like so:

.class {
    outline-color:#FF0;
}