Yesterday, I came across a minor issue with my website. The Box-Shadows appear differently on various browsers. Previously, it was red on Firefox and IE, but now it looks completely different on:
- Opera: Orange
- Chrome: Violet
- Safari: Blue
Why is that happening?
Here is my CSS code:
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 the issue be related to the transition I am using? Or is this a common occurrence?
Here is the 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;
...
}
I hope someone can assist me in resolving this issue. I really want my box-shadow to appear in the same color across all browsers.