Different colors in box-shadows on different browsers?

Question

yesterday I recognized a small problem on my website. My Box-Shadows look different on most browsers. It used to be red (Firefox & IE) but on several it look totally different :

Opera: Orange
Chrome: Violet
Safari: Blue

how can that happen ?

My CSS looks like :

input.test {
  ...
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
  ...
}

input.test:focus {
  ...
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(159, 48, 57, 0.6);
  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(159, 48, 57, 0.6);
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(159, 48, 57, 0.6);
  ...
}

Could it be the transition I also use ? Or is it just normal that way ?

transition css :

input.test {
  ...
  -webkit-transition: border-color 0.75s ease-in-out, box-shadow 0.75s ease-in-out, color 0.75s ease-in-out, background 0.75s ease-in-out;
  -moz-transition: border-color 0.75s ease-in-out, box-shadow 0.75s ease-in-out, color 0.75s ease-in-out, background 0.75s ease-in-out;
  -o-transition: border-color 0.75s ease-in-out, box-shadow 0.75s ease-in-out, color 0.75s ease-in-out, background 0.75s ease-in-out;
  transition: border-color 0.75s ease-in-out, box-shadow 0.75s ease-in-out, color 0.75s ease-in-out, background 0.75s ease-in-out;
  ...
}

Hope someone can help me out. I truely want my box-shadow in the same color on each browser.

score 0 · Answer 1 · edited May 23 '17 at 12:16

0

Ok I found out : Opera, Chrome and Safari (maybe even more) browser use automaticly outlines on form-elements:focus. So they can change the apperance of your boxshadow especially if you used opacity with it.

To get rid of those problems just use :

input:focus, textarea:focus {
  outline: 0 none;
}

some similar problem occured here : how to remove textbox outline in Opera

edited May 23 '17 at 12:16

Community

1
1

answered Jun 16 '14 at 10:52

Kris

567
3
11
25

Note that it's generally a bad idea to specify outline: none due to accessibility reasons. Some folks seem to really need those. Also there's no need for zero in that. – Jun 27 '16 at 06:42

Different colors in box-shadows on different browsers?

1 Answers1