CODEWITHSUNDEEP
csssassradio-buttonaccent-color
Yogesh
Yogesh

Reputation: 331

CSS accent color on form input doesn't work as expected

<body>
  <p>
    <input type="radio" class="custom-radio-blue" checked /> Click me blue!
  </p>
  <p>
    <input type="radio" class="custom-radio-red" checked /> Click me red!
  </p>
  <style>
    .custom-radio-blue {
      accent-color: #01adef;
    }
    
    .custom-radio-red {
      accent-color: red;
    }
  </style>
</body>

In my code above why red colored radio is working fine and why not blue colored with accent-color css property?

Upvotes: 0

Views: 355

Answers (3)

Ceecee Hart
Ceecee Hart

Reputation: 21

Oh this has been bugging me for over a year. No matter the colour space its a problem.

This is a comment I made on discord last autumn:

if the hue value for the hsl is bw 28 and 201, it has that [filled] behaviour. but 0-27,202-360 is fine. with those exact sat and lightness values

But also seems to have to do with the lightness property. If i have hsl(200 50% 50%) it works but hsl(200 50% 55%) it doesnt. Same with saturation. hsl(200 72% 50%) works; hsl(200 73% 50%) doesnt.

Heres a sandbox if anyone wants to play

Chris Bolsen found this which suggests it may be due to contrast.

The UA should use the specified accent-color to draw whichever parts of the element’s control(s) would have otherwise been styled with an accent color. The UA must maintain contrast for legibility of the control, and in order to do so may adjust the luminance or brightness of the color or make color substitutions in other parts of the control (e.g. switching an overlaid glyph from using color to using background-color). It may also generate variations of the color for gradients etc. to match the control to platform conventions for the use of the accent color.

https://drafts.csswg.org/css-ui/#widget-accent

While discussing it, I looked on Android and Chrome and went through a bunch of values, this was the result on mobile for me mobile, android, chrome

While Chris was on a PC in chrome with these results (same values) pc, chrome

Upvotes: 0

A Haworth
A Haworth

Reputation: 36605

This looks like a strange bug.

Whether the color 'splodges' all over the circle (and slightly beyond) or whether the circle stays centrally in the right place seems to depend on the value of the color.

In this snippet on the first input the green is set to 9c and the blue extends beyond the outer circle of the radio button. On the second input the green is set just one down to 9b and the inner circle appears correctly.

<body>
  <p>
    <input type="radio" class="custom-radio-blue" checked /> accent-color: #019cef;
  </p>
  <p>
    <input type="radio" class="custom-radio-red" checked /> accent-color: #019bef;
  </p>
  <style>
    .custom-radio-blue {
      accent-color: #019cef;
    }
    
    .custom-radio-red {
      accent-color: #019bef;
    }
  </style>
</body>

The same result is seen if you use rgb or rgba formats.

This mis-behavior I saw on Windows10/Edge. Is it browser dependent?

Upvotes: 0

forwardfeed
forwardfeed

Reputation: 1

i cannot explain why exactly as the appearance is decided by each browsers differently but if you change your blue from accent-color: rgb(1,153,255); to accent-color: rgb(1,152,255); or from accent-color: rgb(33,152,255); to accent-color: rgb(34,152,255);

The browser will internally decide in function of the color brightness if the inner color will be black or white. Hence as a solution i suggest you choose colors that are in the same range of brightness

Upvotes: 0

Related Questions