CODEWITHSUNDEEP
jquerycssshadow
Igal
Igal

Reputation: 6093

Adding shadow to textbox onFocus

I want to make this sort of Pinterest effect on my registration form - when the user focuses on an input text field or text area, I want this field or area to have a soft shadow around it, like this:

enter image description here

So I tried the following - I wrote a CSS class

.inputShadow{
box-shadow:0 0 10px 5px #900;
}

and tried to add it with onFocus="addShadow()", where this was the addShadow() function:

function addShadow(){
    $(this).addClass("inputShadow");
}

but I didn't get any shadow. Then I tried this:

$(function(){
    $("input").onfocus("addClass","inputShadow");
});

Also without result. Finally I tried this:

$(function(){
    $("input").onfocus("css","box-shadow:0 0 10px 5px #900;");
});

but that didn't help me either.

Any ideas how to make it work? Thanks!

Upvotes: 0

Views: 5779

Answers (3)

Fox32
Fox32

Reputation: 13560

No need to use jQuery for this task, you can use css only, too:

input:focus {
  /* Your shadow css here */
  -moz-box-shadow:0 0 10px 5px #900;
  -webkit-box-shadow:0 0 10px 5px #900;
  box-shadow:0 0 10px 5px #900;
}

But creminsn is right, box-shadow might not work with every browser, you need to add a browser specific prefix.

Upvotes: 3

MrJD
MrJD

Reputation: 1889

Haven't tested it but this should work:

$(function(){
   $("input").on("focus",function(){
       $(this).addClass(".inputShadow");
   });
});

Edit: also check browser compatibility, as mentioned in other answer

Upvotes: 1

ncremins
ncremins

Reputation: 9200

what browser are you using as mozilla and chrome browsers have a different css rules.

e.g.

.inputShadow {
    -moz-box-shadow:0 0 10px 5px #900;
    -webkit-box-shadow:0 0 10px 5px #900;
    box-shadow:0 0 10px 5px #900;
}

Upvotes: 1

Related Questions