Take the 2-minute tour ×

I'm trying to create something similar to a bootstrap input. When the user clicks on the input it will play a nice transition and glow. I got all the styling down but the transition is showing up wierd but all the other sites animate it correctly. My box shadow shows up very fast then dims down but here at This link Everything is working correctly, but here at Its animating it differently than the link before this. I Have some code below.

CSS Input

.Field {
padding:7px 8px;
background-position:right center;
border:1px solid #ccc;
box-shadow:inset 0 1px 2px rgba(0,0,0,0.075);

.Field:focus {
box-shadow:0 0 10px rgba(0,153,255,.75);
border:1px solid #09F;

By the way im using the latest version of Google Chrome.

share|improve this question
add comment

1 Answer

up vote 3 down vote accepted

This has something to do with your original box shadow being inset. The browser appears to have trouble transitioning between an inset and a non-inset box-shadow and just doesn't try. There is an easy fix though - add the original box shadow back in for the focused style:

.Field:focus {
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.075), 0 0 10px rgba(0,153,255,.75);
    border: 1px solid #09F;

This keeps the box-shadow you already have there (which was being overwritten/replaced with your focus box-shadow) and adds the new box-shadow to it on focus, which correctly fades in and out when you click in the box.

share|improve this answer
Thank you alot!! this worked, in 4 minnutes i can accept the answer... –  Moussa Harajli Mar 21 '13 at 0:59
add comment

Your Answer


