Chrome和Chrome Opera广播盒阴影是正方形 - 任何解决方法？ [英] Chrome & Opera radio box-shadow is square - Any workaround?

问题描述

Chrome和歌剧都在无线电输入的样式中有错误，因此阴影会出现在正方形框周围，而不是原始元素。

Firefox： / p>

Chrome& Opera：

有没有人知道这个问题的解决方法，而不是删除chrome& opera？

解决方案

将radio元素包裹在div中，并将div的溢出设置为hidden，border-radius设置为100px。然后将无线电输入设置为显示块，没有边距。

 < div class =radio_contain> 
< input type =radioid =r1name =r1> 
< / div> 
 
 
 
 .radio_contain {
 display：inline-block; 
 border-radius：100px; 
 overflow：hidden; 
 padding：0; 
} 
 .radio_contain input [type =radio] {
 display：block; 
 margin：0; 
} 
  

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?

解决方案

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;
}

这篇关于Chrome和Chrome Opera广播盒阴影是正方形 - 任何解决方法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！