美文网首页
[CSS]利用<label>实现<input&

[CSS]利用<label>实现<input&

作者: 油焖微风 | 来源:发表于2016-08-01 12:29 被阅读4634次

我们在设置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>标签存在这样一个特性:当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。于是我们就可以利用这一个特性来实现单选按钮的自定义了。
例如下图的显示效果:


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

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&

    我们在设置form表单中设置单选列表时,一般做法是将input元素的type为radio,浏览器会默认给出单选按钮...

  • Read a story

    This is a lion. lt's big. lt's strong. lt has big teeth. ...

  • Mybatis中特殊符号转移

    1. 写法1 原符号替换符号<<<=<=>>>=>=<><>&&'&a...

  • Read a story

    lt's hot?? lt's cool here. lt's a hat. What's this? Do yo...

  • test

    <script>alert(1);</script>

  • 无标题文章

    <script>alert('hello’);</script>

  • 芯科通信招聘fw固件工程师

    职责描述 工作职责:lt;/pgt;lt;pgt;1、负责光模块firmware的软件设计、维护以及优化;lt;/...

  • 打卡第47天

    Attention is vitality. lt connects you with others. lt ma...

  • Listen and enjoy

    lt can be bitter. lt can be sweet. Sometimes it's black. ...

  • 2018-10-08

    线性系统的LT分析法一、数学角度1、对微分方程进行LT分析eg:同求LT变换得到2、对电路进行LT处理对于线性电路...

网友评论

      本文标题:[CSS]利用<label>实现<input&

      本文链接:https://www.haomeiwen.com/subject/fcmxsttx.html