label模拟radio、checkbox,自定义radio和checkbox

原创 2016年08月30日 20:04:02
最近做的项目选项框比较多,为了让界面看起来更加美观,决定自定义radio和checkbox,功能不变的情况下提高用户体验。

这里比较关键的一点是用到label的for属性。

w3c的label介绍:

<label> 标签为 input 元素定义标注(标记)。
label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。

<label> 标签的 for 属性应当与相关元素的 id 属性相同。

所以当我们为label用for属性绑定了指定元素id时候,只要我们点击label,就会触发绑定的元素。可以在w3c查看例子。http://www.w3school.com.cn/tiy/t.asp?f=html_label


好了原理讲明白后,就可以开始自定义我们的radio和checkbox。大致思路就是用label绑定radio,然后设置radio为不显示,在自定义label的样式就行了。


html代码:

<div class="testOptions">
        <ul>
            <li><input type="radio" id="radio01" name="check"><label for="radio01"></label>选项</li>
            <li><input type="radio" id="radio02" name="check"><label for="radio02"></label>选项</li>
            <li><input type="radio" id="radio03" name="check"><label for="radio03"></label>选项</li>
            <li><input type="radio" id="radio04" name="check"><label for="radio04"></label>选项</li>
        </ul>

        <ul>
            <li><input type="checkbox" id="checkbox01" name="check"><label for="checkbox01"></label>选项</li>
            <li><input type="checkbox" id="checkbox02" name="check"><label for="checkbox02"></label>选项</li>
            <li><input type="checkbox" id="checkbox03" name="check"><label for="checkbox03"></label>选项</li>
            <li><input type="checkbox" id="checkbox04" name="check"><label for="checkbox04"></label>选项</li>
        </ul>
    </div>

     <div class="_testOptions">
        <ul>
            <li><input type="checkbox" id="checkbox001" name="check"><label for="checkbox001"></label>选项</li>
            <li><input type="checkbox" id="checkbox002" name="check"><label for="checkbox002"></label>选项</li>
            <li><input type="checkbox" id="checkbox003" name="check"><label for="checkbox003"></label>选项</li>
            <li><input type="checkbox" id="checkbox004" name="check"><label for="checkbox004"></label>选项</li>
        </ul>
    </div>
css代码:
.testOptions li,._testOptions li{margin: 5px 0px;}
/*隐藏选项框*/
.testOptions input[type='checkbox'],.testOptions input[type='radio'],
._testOptions input[type='checkbox']{
    visibility: hidden;
    cursor: pointer;
}

/*设置label样式*/
.testOptions input[type='radio']+label,.testOptions input[type='checkbox']+label,
._testOptions input[type='checkbox']+label{
    display: inline-block;
    vertical-align: top;
    width: 1.3em;
    height: 1.3em;
    margin-right:5px;
    position: relative;
    background-color: #d8d4d4;
    transition: background 0.5s linear;
    box-sizing:border-box;
    -webkit-transition: background 0.3s linear;
    -webkit-box-sizing:border-box;
}
/*相邻选择器来模拟选项被选择的效果*/
.testOptions input[type='radio']+label{border-radius: 50%;}
.testOptions input[type='radio']:checked+label {border:0.35em #d8d4d4 solid;background-color: #0ab5f1;}
.testOptions input[type='checkbox']:checked+label {background-image: url("image/check_32px.png");background-size: 100% 100%;}

._testOptions input[type='checkbox']:checked+label:after{content: "√";font-size: 20px;font-weight:bold;color: #0ab5f1;}
</style>
效果图:(一个利用伪元素打钩,一个图片)

版权声明:本文为博主原创文章,未经博主允许不得转载。

浅谈<label>与<input>合作的两种方式

标签来定义表单控制间的关系,当用户选择该标签时,浏览器会自动将焦点转到和标签相关的表单控件上。 eg1: 通过为设置id属性,在标签中设置for=id来让说明文本和对应的关联起来。 Number:...
  • zhouziyu2011
  • zhouziyu2011
  • 2017年02月28日 14:10
  • 7615

Span模拟单选按钮Radio

Span模拟单选按钮Radio
  • netuser1937
  • netuser1937
  • 2017年02月09日 08:45
  • 766

js/jquery模拟radio单选效果

如题。 现在我们已经不满足于仅仅使用原生单选按钮了。 我们当然希望让自己的样式别出一格,可以随意修改其样式。         实现样式的话,使用ul/li进行配合是最好的。因为我们可以通过jqu...
  • killzero
  • killzero
  • 2014年03月02日 10:29
  • 2505

模拟 html radio 的单选效果

效果图:   代码如下:  (jQuery版) .unchecked{ border: 1px solid gray; padding: 6px 6px 6px 6px;}.checked{ b...
  • sandy945
  • sandy945
  • 2010年04月22日 00:50
  • 8315

自定义radio与checkbox的样式

由于input中的radio与checkbox的样式比较单一而且样式不是很美观,所以我们一般都想定义一个自己比较喜欢的样式,偶然发现这种自定义方法比较容易理解,在此特意分享一下: 首先是自定义单选框...
  • Doulvme
  • Doulvme
  • 2016年12月30日 14:11
  • 2219

自定义radio样式

  • 2015年06月11日 10:47
  • 11KB
  • 下载

CheckBox点击lable文字选中

这是一个例子: 复选框 与之间--> for="check1">姓名 id="check1" value="123" name="name"> 密码 注意事项:文字必须是labe...
  • limenghua9112
  • limenghua9112
  • 2015年04月09日 13:21
  • 3046

html 如何绑定radio 控件和label控件

只要指定label的"for"属性到radio的id就行,或者用label标签包围住radio。 请参见下面例子: 写法一: input type="radio" id="radioA" n...
  • dragoo1
  • dragoo1
  • 2015年07月10日 14:56
  • 5475

CSS3模拟checkbox

话说, 很久很久以前, 一直到不久前, 浏览器原生的checkbox(复选框)的样式大部分都不能改的, 在各个浏览器中的外观和行为都不一致, 这是一件相当让人蛋疼的事. 而在那个远古的蛮荒时代,...
  • atgwwx
  • atgwwx
  • 2013年01月17日 13:45
  • 380

html中radio的checked与选中

最初使用html的radio标签时以为checked标签就是选中,在动态改变radio标签的选中状态时总是没有得到理想结果。     查资料加各种验证有了一点小想法。貌似被设置被checked属性只...
  • junziruyu_
  • junziruyu_
  • 2015年09月06日 13:55
  • 1882
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:label模拟radio、checkbox,自定义radio和checkbox
举报原因:
原因补充:

(最多只允许输入30个字)