javascript - Highlighting a field using javascript

Question

I am getting a bit stuck, I am trying to recreate the glow you get when you focus on a field in chrome even though my input box is made up for two parts.

Here is my code: http://jsfiddle.net/spadez/vAfxw/9/

Now this is what I was trying to do:

document.getElementById('location').onfocus=function(){
    this.value='';
    document.getElementById('searchContainer').style['border'] ='1px solid blue';
}

document.getElementById('location').onblur=function(){
    document.getElementById('searchContainer').style['border'] ='none';
}

Should I be surruonding my field and div with a "searchContainer" or should I instead by applying this CSS to both the field and the div? Basically I am trying to get the entire location box to glow blue when selected not just the input box.

Answer 1

您可能想看看 CSS Outline 属性。