CODEWITHSUNDEEP
focustransitioncss
GTS Joe
GTS Joe

Reputation: 4152

CSS transition Not Working on box-shadow Property

I have an input text field an I would like that when a user focuses on it, the box-shadow property transitions from one style to a different style. What is wrong with my two CSS declarations causing the transition not to happen?

input[type="text"], textarea { box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3) inset; transition: box-shadow 0.33s ease-in-out; }
input[type="text"]:focus, textarea:focus { box-shadow: 0 0 7px 0 rgba(30, 144, 255, 1); }

Upvotes: 3

Views: 4336

Answers (1)

deebs
deebs

Reputation: 1410

It seems that you can't transition from an inset box-shadow to a normal box-shadow, and vice versa. Here is a great answer CSS box-shadow transition. And applied to your code:

input[type="text"], textarea { box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3) inset, 0px 0px 0px white; transition: box-shadow 0.33s ease-in-out; }
input[type="text"]:focus, textarea:focus { box-shadow: 0px 0px 0px white inset, 0 0 7px 0 rgba(30, 144, 255, 1); }

I tested in Chrome and it works perfectly.

edit:

For further explanation, basically you are creating an empty / blank style (0px 0px 0px white) for the inset box-shadow on the :focus class, and an empty outer box-shadow style for the not :focus class. This way the inset shadow transitions from styled to non-styled and the outer shadow transitions from non-styled to styled. Hopefully that clarifies a bit.

Upvotes: 14

Related Questions