CODEWITHSUNDEEP
google-chromecss
Damian Galarza
Damian Galarza

Reputation: 224

Chrome CSS3 Box shadow text field issue

Has anyone run into an issue in Google Chrome when applying a box shadow to a text input? I have this obscure issue where once in a while when typing in the input, the box shadow appears to double. I've tried several things but nothing seems to fix it. Worst of all, the issue is very inconsistent. The only thing that I can do to semi-consistently have this issue appear is reset the browser cache every time.

enter image description here

The CSS being applied to the input is as follows:

input[type=text] {
  padding: 7px 0 7px 10px;
  height: 14px;
  border: 1px solid #dadada;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  -o-border-radius: 2px;
  -ms-border-radius: 2px;
  -khtml-border-radius: 2px;
  border-radius: 2px;
  -moz-box-shadow: #e4e4e4 4px 5px 10px inset;
  -webkit-box-shadow: #e4e4e4 4px 5px 10px inset;
  -o-box-shadow: #e4e4e4 4px 5px 10px inset;
  box-shadow: #e4e4e4 4px 5px 10px inset;
}

input[type=text]:focus {
  outline: none;   
}

Here is a JSFiddle of the code in action. http://jsfiddle.net/S5xzM/

Any insight would be greatly appreciated!

[Edit] The version of Chrome this is currently happening in is 14.0.835

Upvotes: 2

Views: 3704

Answers (1)

methodofaction
methodofaction

Reputation: 72405

Interesting problem!

This is most definitely a Webkit bug. This only happens if you put outline: none; on the focus pseudo-selector.

This is the only workaround I could find:

input[type=text]:focus {
    outline-color: rgba(255,255,255,0);
    outline-offset: 10px;
}

I tried various methods, such as outline-width: 0, or outline-color: transparent, but they didn't work.

http://jsfiddle.net/Gvh2L/

Upvotes: 3

Related Questions