KPC
Kevin Powell - Community•3mo ago
DemonSlayer112

firefox button color not correct.

So i been making a little project, and i decided to use buttons over divs for accessibility. Plus I happen to like the colors from google. So i tried to reset the styles and reapply to firefox, but something strange is going on. Chrome's color im trying to emulate(pretty much just the border color):
No description
5 Replies
DemonSlayer112
DemonSlayer112OP•3mo ago
And here's firefox:
No description
DemonSlayer112
DemonSlayer112OP•3mo ago
I used this: 
border-top-color: #545454;
border-left-color: #545454;
border-right-color:#000;
border-bottom-color:#000;
border-top-color: #545454;
border-left-color: #545454;
border-right-color:#000;
border-bottom-color:#000;
DemonSlayer112
DemonSlayer112OP•3mo ago
I assumed firefox was ignoring the colors but that turns out to not be the case:
No description
DemonSlayer112
DemonSlayer112OP•3mo ago
Alright i think i found it, they both use border-style: outset; so i went with that, but using solid keeps them both consistent. Before closing im curious of why this works. Does outset work differently for firefox? Does it choose top color only for whole border or something?
Chris Bolson
Chris Bolson•3mo ago
I think that the browsers adjust the shade of the outset based on the border color that you define according to their own criteria. It seems that Firefox is choosing an outset color that is lighter when compared to other browsers

Did you find this page helpful?