onfocus for form input to change border colour?

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"  styl开发者_如何学Goe="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?

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/

Just use css for outline color like so:

.class {
    outline-color:#FF0;
}

you can use the :focus pseudoclass #q:focus {border:red 1px solid;} but as you can see here http://www.quirksmode.org/css/contents.html it's not supported by ie 7 and below. To achieve cross browser compatibility you can use jquery and the following code

$('#q').focus(function() {
    $('#q').css('border','1px solid red');
});

input:not([type="button"]):not([type="submit"]):not([type="reset"]):hover, input:not([type="button"]):not([type="submit"]):not([type="reset"]):focus, textarea:hover, textarea:focus, select:hover, select:focus 
{    
    border:2px solid #1b2a44;    
    outline:none;
}
.form-control{
padding:5px;
background-color:#f7f7f7;
border:1px solid red;
}

 <label>TextBox 1:</label><input type="text" class="form-control">
  <label>TextBox 2:</label> <input type="text" class="form-control">

The answer from Carl-Michael Hughes is what finally worked for me! outline-color is the only way to set the focus "border" color. Thanks!

input:not([type="button"]):not([type="submit"]):not([type="reset"]):hover, input:not([type="button"]):not([type="submit"]):not([type="reset"]):focus, textarea:hover, textarea:focus, select:hover, select:focus {
    border-color: #81256f;
    box-shadow: none;
}

Use this CSS. This will do the job for you. With the above CSS i achieved the following output:

Hope this helped you :-)

I don't recommend using inline style like this and would even recommend wiring up the events via javascript/jquery but...

You can set background color with object.style.borderColor. Color is only the font color.

The css markup in shorthand is just 'border' or specifically if you want to set border color from css it is 'border-color'. In javascript that turns to this.style.borderColor.