How to change the outline color with a click

Question

I have a simple code here and I wanted to change the outline color when a user clicks on the text field.

<input type="text" id="box1" />
<input type="password" id="box2" />
<input type="email"  id="box3" />

<input type="submit" id="sub" value="submit" />

I am not aware of how to make the outline color change when the user clicks any of the above.

my idea is this jquery code:

$(document).ready(function(){
$(#box1).click(function(){ 
$(this).css('outline-color','#00BFFF').css('box-shadow',' 0px 9px 0px rgba(0, 161,   214,1)')
});

});

am not sure if this is correct, I want to change the outline color and add a boxshadow to it as well to give it a good look. I have been trying to figure this out on my own from last night.

Answer 1

Try this please:

Working demo http://jsfiddle.net/kEFde/ or http://jsfiddle.net/5PhkD/ this with a class if you want to put that shadow color in all the text box.

you were missing a ' for the id for box

Rest should fit the needs :)

code

 $(document).ready(function () {
  $('#box1').click(function () {
      $(this).css('outline-color', '#00BFFF').css('box-shadow', ' 0px 9px 0px rgba(0, 161,   214,1)')
  });

  });

Working screenshot:

Answer 2

the :focus pseudoselector will select whatever textbox the user is typing in, it will reset when they click out. is this what you want?

http://jsfiddle.net/m8WcN/

.foo:focus{

   outline-color:#00BFFF;
   box-shadow: 0px 9px 0px rgba(0, 161,214,1);

}

Answer 3

I think you don't need JS to do that,you justwant to change the outline color when gets focus, Only CSS is ok:

#box1{
    outline-color: #00BFFF;  
}
#box1:hover{
    box-shadow: 0px 9px 0px rgba(0, 161,   214,1);
}

perhaps some prefix should be added for cross browser cmpatibility