box-shadow doesn't work in Chrome

Question

I can't make box shadow in chrome to work, I used webkit prefix but still I get orange frame around my tag instead I should get gray shadow. This is working in all browsers except Chrome.

.loginForm input[type='text']:focus, .loginForm input[type='password']:focus,
.registerForm input[type='text']:focus, .registerForm input[type='password']:focus{
    box-shadow: 0 0 10px gray;
    -webkit-box-shadow: 0 0 10px gray;
}

What does your HTML look like? A jsFiddle.net example is usually helpful with questions like this. — j08691, Aug 09 '13 at 13:54

score 1 · Answer 1 · answered Aug 09 '13 at 13:55

1

This looks okay for me, but I think what you are seeing is the outline proprety on focus obscuring the shadow.

.selector {
    outline: 0;
    box-shadow: 0 0 10px gray;
}

http://jsfiddle.net/VKkng/

answered Aug 09 '13 at 13:55

Explosion Pills

188,624
52
326
405

score 1 · Accepted Answer · edited May 23 '17 at 12:09

You need to change the order in which you declare the box shadow properties - the unprefixed version should come last, like this:

.loginForm input[type='text']:focus, 
.loginForm input[type='password']:focus,
.registerForm input[type='text']:focus, 
.registerForm input[type='password']:focus{
    -webkit-box-shadow: 0 0 10px gray;
    box-shadow: 0 0 10px gray;

    /* Remove the orange focus border */
    outline: 0;
}

The orange border is Chrome's default focus style and can be removed with outline: 0 as shown above. More information can be found in this answer.

box-shadow doesn't work in Chrome

2 Answers2