<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?
On
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?
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);toaccent-color: rgb(1,152,255);or fromaccent-color: rgb(33,152,255);toaccent-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