Question 333331 in CSS Question posted in
Some basic documentation can be found here.

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?

Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    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?

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search