Question

所以，我的自定义CSS3收音机按钮工作，他们在我的网站上看起来很棒。他们在Firefox工作，从我读过的，他们应该在大多数现代浏览器中工作。但是，在我的手机（带有Android 4.3的Galaxy Nexus）上，虽然它们在Chrome中完美运行，但它们无法使用默认的香草浏览器（无法点击）。我怀疑在各种版本的Internet Explorer中也很可能出现问题（似乎总是如此）。

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

在我看来，其他人可能会遇到同样的问题，所以我已经包含了我的代码，希望你可以帮我解决这个问题，并且这个主题可能会指出其他人在未来的正确方向。谢谢你的时间。

这是我的代码：

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

自定义复选框

PyJWT

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

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

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

2 个答案: