[CSS]利用<label>实现<input>单选按钮显示的自定义

我们在设置form表单中设置单选列表时，一般做法是将input元素的type为radio，浏览器会默认给出单选按钮的显示，而这个单选按钮样式往往与界面整体风格并不相符，那么有什么方法能够做到单选按钮的显示样式的自定义呢？

首先我们需要介绍一下<label>标签：

<form>
  <label for="male">Male</label>
  <input type="radio" name="sex" id="male" value="male"><br>
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" value="female"><br>
</form>

<label> 标签的 for 属性应当与相关元素的 id 属性相同。
<label> 标签为 input 元素定义标注（标记）。label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说<label>标签存在这样一个特性：当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。于是我们就可以利用这一个特性来实现单选按钮的自定义了。
例如下图的显示效果：

图片发自简书App

html部分主要代码如下:

<div  class="container">   
 <form>
   <input type="radio" id="option-0-1" name="mode" value = "0" class="option-radio" checked />
   <label for="option-0-1"></label>
   <span class="">选项一</span>    
   <input type="radio" id="option-0-2" name="mode" value = "1" class="option-radio" />
   <label for="option-0-2"></label>
   <span class="">选项二</span>    
 </form>
</div>
<div  class="container">    disable:    
  <form>        
    <input type="radio" id="option-1-0" name="mode" value = "0" class="option-radio" disabled/>
    <label for="option-1-0"></label>
    <span class="">选项一</span>        
    <input type="radio" id="option-1-1" name="mode" value = "1" class="option-radio" disabled/>
    <label for="option-1-1"></label>
    <span class="">选项二</span>    
  </form>
</div>

当然html部分的代码与一般的写法并没有什么区别，重要的是CSS部分的代码，首先我们要隐藏<input>的显示。（CSS代码如下）

.option-radio{
  display: none;
}
.option-radio+label{
  position: relative;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  border: 1px solid #9a9a9a;
  background-color: transparent;
  display: inline-block;
  top:5px;
}
.option-radio:checked+label{
  position: relative;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  border: 1px solid rgb(4, 190, 2);
  background-color: transparent;
  display: inline-block;
  top:5px;
}
.option-radio:checked+label:after{
  position: absolute;
  content: '';
  font-size: 0;
  border: 5px solid rgb(4, 190, 2);
  border-radius: 50%;
  top:5px;
  left:5px;
}
.option-radio:checked:disabled+label{
   border-color: #9a9a9a;
}
.option-radio:checked:disabled+label:after{
   border-color: #9a9a9a;
}
.option-radio:checked+label:hover,.option-radio + label:hover {
   cursor: pointer;
}
.option-radio:checked+label:active,.option-radio + label:active {
filter: alpha(opacity=45);
   -moz-opacity: 0.45;
   -khtml-opacity: 0.45;
   opacity: 0.45;
}
.container{
  margin:15px;
}

<input>隐藏，而单选按钮显示的工作全部交由<label>负责。为了使<label>能模拟单选按钮的各种状态，选中、未选中、点击、禁用等状态，这里采用了比较复杂的CSS写法，大量应用了CSS的伪类和伪元素。
例如“.option-radio:checked+label{...}”表示的就是选中状状态下邻近的<label>的显示，此时<label>显示为按钮外面的绿色圆圈边界,而“.option-radio:checked+label:after{...}”表示就是选中状态下<lable>的伪元素after显示为按钮内部的绿色小圆形的显示。依此类推，我们就可以理解未选中、点击和禁用等状态的实现了。
值得注意的一点，上一篇有关CSS的文章中提到的伪元素after，这里也有应用，当然应用的关键点，上一篇中已有介绍，就是position的设置，<label>的css position属性设置为“position: relative;”，而其对应的伪元素after的css position属性设置为“position: absolute;”。圆圈和圆饼的显示都是采用的是设置CSS的border 和border-radius属性。
这里的自定义显示只是简单的使用了CSS的border 和border-radius属性来完成单选按钮圆形外观的显示，比较中规中矩，其实可以根据需要添加其它各种效果，例如加上各种阴影，让按钮更具立体感。或者在不同的状态下启用不同的背景图片，来做出更具个性的按钮。而实现这些所说的效果，主体代码框架会如上面描述那样，不会大的更改，只需改变CSS的某些属性设置就可以做到。

关于<input>的外观自定义这里只是简单的提到了单选按钮，<input>其实还有很多很好玩的自定义方式，后续文章会再度介绍的。

[CSS]利用<label>实现<input>单选按钮显示的自定义

推荐阅读更多精彩内容