CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3052886
user3052886

Reputation: 80

How to change the outline color with a click

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.

Upvotes: 1

Views: 500

Answers (3)

danny.hu
danny.hu

Reputation: 110

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

Upvotes: 0

roo2
roo2

Reputation: 6071

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);

}

Upvotes: 1

Tats_innit
Tats_innit

Reputation: 34107

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:

enter image description here

Upvotes: 1

Related Questions