Chrome & Opera radio box-shadow is square - Any workaround?

Question

Chrome and opera both have bug in the styling of radio inputs, so that the shadow appears around a square box, rather than the native element.

Firefox:

Chrome & Opera:

Does anyone know of a workaround for this, rather than just removing shadows for chrome & opera?

Answer 1

Wrap the radio element in a div, and set that div's overflow to hidden, and border-radius to 100px. Then set the radio input to display block, and no margin.

<div class="radio_contain">
    <input type="radio" id="r1" name="r1">
</div>



.radio_contain {
  display: inline-block;
  border-radius: 100px;
  overflow: hidden;
  padding: 0;
}
.radio_contain input[type="radio"] {
  display: block;
  margin: 0;
}