Question

我正在开发一款使用单选按钮的应用。我试图找出如何使我的单选按钮看起来比默认的单选按钮更好。但是，我没有运气在网上找到任何例子。我发现的一切都将单选按钮更改为切换按钮。

基本上，我想要单选按钮方法。我只是想让它更大。我还希望组中选定的单选按钮为绿色。

有没有办法用CSS做到这一点？如果是这样，怎么样？或者，我是否需要使用一些自定义控件库？

谢谢！

Answer 1

Google搜索“css自定义单选按钮”产生了许多有用的结果，例如this，这是基于该教程的jsfiddle，代码如下所示。显然，这是一种解决方案，而不是根据我所知不存在的单选按钮样式的本机方式。

HTML：

<div class="radio">  
    <input id="male" type="radio" name="gender" value="male"/>  
    <label for="male">Male</label>  
    <input id="female" type="radio" name="gender" value="female"/>  
    <label for="female">Female</label>  
</div>

CSS：

label {  
    display: inline-block;  
    cursor: pointer;  
    position: relative;  
    padding-left: 25px;  
    margin-right: 15px;  
    font-size: 13px;  
} 

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

label::before {  
    content: "";  
    display: inline-block;  

    width: 16px;  
    height: 16px;  

    margin-right: 10px;  
    position: absolute;  
    left: 0;  
    bottombottom: 1px;  
    background-color: #aaa;  
    box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);  
} 

.radio label::before {  
    border-radius: 8px;  
} 

input[type=radio]:checked + label::before {  
    content: "\2022";  
    color: #f3f3f3;  
    font-size: 30px;  
    text-align: center;  
    line-height: 18px;  
}

Answer 2

流行的方法是使用::before伪元素，并格式化。必须在视觉上隐藏收音机/复选框。

input[type="radio"].fancy {
    opacity: 0;
    margin-right: -12px;
}

input[type="radio"].fancy + label::before {
    content: "";
    overflow: hidden;
    font-size: 10px;
    text-align: center;
    margin-right: 3px;
    display: inline-block;
    vertical-align: middle;
    border: 1px solid #333333;
    background-color: #EEEEEE;
    width: 12px;
    height: 12px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
}

input[type="radio"].fancy:checked + label::before {
    content: "•";
    color: #777777;
    background-color: #FFFFFF;
}

input[type="radio"].fancy:disabled + label::before {
    background-color: #999999;
}

<p>
  <input type="radio" class="fancy" id="radio1" name="radiogroup1" />
  <label for="radio1">Fancy radio1</label>
</p>

<p>
  <input type="radio" class="fancy" id="radio2" name="radiogroup1" />
  <label for="radio2">Fancy radio2</label>
</p>

<p>
  <input type="radio" class="fancy" id="radio3" name="radiogroup1" disabled="disabled" />
  <label for="radio3">Disabled radio</label>
</p>

Answer 3

是的，可以在背景图片的帮助下完成，下面的代码片段可能会有所帮助

HTML：

<input type="radio" name="radio" class="radio" /> Yes
<input type="radio" name="radio" class="radio" /> No

CSS：

 .radio {
  width: 19px;
  height: 25px;
  padding: 0 5px 0 0;
  background: url(radio.png) no-repeat;
  display: block;
  clear: left;
  float: left;
}

链接可以提供帮助： http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

http://code.stephenmorley.org/html-and-css/styling-checkboxes-and-radio-buttons/

使用CSS使单选按钮“漂亮”

3 个答案: