自定义 CSS3 单选按钮的浏览器支持

Question

所以，我得到了我的自定义 CSS3 单选按钮，它们在我的网站上看起来很棒。他们在 Firefox 中工作，根据我的阅读，他们应该在大多数现代浏览器中工作。但是，在我的手机（Android 4.3 的 Galaxy Nexus）上，虽然它们在 Chrome 中完美运行，但在默认的香草浏览器上却无法运行（无法点击）。我怀疑 Internet Explorer 的各种版本也很可能存在问题（似乎一直存在）。

我找到了a great article about browser support for custom radio buttons，但在所有标记出来的文本和各种更新之间，我无法弄清楚我的按钮到底出了什么问题以及最简单的解决方案是什么。

在我看来，其他人可能会遇到同样的问题，所以我已经包含了我的代码，希望你能帮助我深入了解这个问题，并且这个主题可能会在未来为其他人指明正确的方向.感谢您的宝贵时间。

这是我的代码：

input[type=radio] {
display:none;
}

input[type=radio] + label:before {
content: "";  
display: inline-block;  
width: 15px;  
height: 15px;  
vertical-align:middle;
margin-right: 8px;  
background-color: #aaa;  
border-radius: 8px;  
margin-top: -3.5px;
margin-left: 5%;
}

input[type=radio]:checked + label:before {
content: ""; /* just change color, no bullet */
background-color: #24bbff; 
text-align:center;
line-height:14px;
}

Answer 1

我不久前制作了这支笔，并在 android 上工作。 http://codepen.io/karlprieb/pen/kKjCn

为您的设计和测试编辑 css：

/* RADIO BUTTONS */
[type="radio"] {
  visibility: hidden;
}

/* Radio button style */
[type="radio"]:not(:checked) + label,
[type="radio"]:checked + label {
  position: relative;
  padding-left: 20px;
  margin-left: -20px;
  cursor: pointer;
}

[type="radio"]:not(:checked) + label:before,
[type="radio"]:checked + label:before {
  content: '';
  position: absolute;
  left:0; top: 0 ;
  width: 13px; height: 13px;
  border: 2px solid #cacaca;
  background: #fff;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
}

/* Checked style */
[type="radio"]:not(:checked) + label:after,
[type="radio"]:checked + label:after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 17px;
  height: 17px;
  background: #82cdf5;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
  transition: all .2s;
}

/* checked mark aspect changes */
[type="radio"]:not(:checked) + label:after {
  opacity: 0;
  transform: scale(0);
}
[type="radio"]:checked + label:after {
  opacity: 1;
  transform: scale(1);
}

/* Label hover style */
label:hover:before {
  border: 2px solid #82cdf5!important;
}

Answer 2

自定义复选框

// Check box 
.check-large[type="checkbox"]:checked::-ms-check {
    border: 2px solid #aaa;
    color: #aaa;
    opacity: 1;
    font-size: larger;
}
.check-large[type="checkbox"] {
    /* remove standard background appearance */
    -webkit-appearance: none;
    -moz-appearance: none;
    /* create custom checkbox appearance */
    display: inline-block;
    width: 22px;
    height: 22px;
    padding: 4px;
    /* background-color only for content */
    background-clip: content-box;
    border: 2px solid #000000;
    opacity: 0.4;   
    vertical-align: bottom;
}

/* appearance for checked Checkbox */
.check-large[type="checkbox"]:checked , .check-large[type="checkbox"]:disabled:checked{
    background-color: #aaa;
    border: 2px solid #aaa;
    opacity: 1;
}

<input type="checkbox" class="check-large">
<input type="checkbox" class="check-large">	

// Radio Button 
.radio-large[type="radio"]:checked::-ms-check {
    border: 2px solid #aaa;
    color: #aaa;
    opacity: 1;
    font-size: larger;
}
.radio-large[type="radio"] {
    /* remove standard background appearance */
    -webkit-appearance: none;
    -moz-appearance: none;
    /* create custom radiobutton appearance */
    display: inline-block;
    width: 22px;
    height: 22px;
    padding: 4px;
    /* background-color only for content */
    background-clip: content-box;
    border: 2px solid #000000;
    opacity: 0.4;   
    vertical-align: bottom;
    border-radius:50%;
}

/* appearance for checked Radio button */
.radio-large[type="radio"]:checked , .radio-large[type="radio"]:disabled:checked{
    background-color: #aaa;
    border: 2px solid #aaa;
    opacity: 1;
}

<input type="radio" name="radio-check" selected='selected' class="radio-large" >
<input type="radio" name="radio-check"  class="radio-large" >

这可用于自定义单选和复选框创建。