单选框与复选框原生控件美化有多种解决方案,现在采用经典的input+label的方式自己实现一种

思路:

input 和label 通过id和for属性关联,点击label时,input选中状态改变

透明化input,并且绝对定位,脱离文档流,不影响label空间占用

label包含一个b元素用于模拟单选和复选的框框

使用b元素的伪类,"画出"单选和复选的勾和圆点

利用input:check选择器改变b元素的选中状态

html:

// input控件在前,label在后面
<input class="input-check" type="checkbox" id="check1" />
<label class="input-check-label" for="check1"><b class="check"></b>复选框</label> <input class="input-check" name="radio1" type="radio" id="radio1" />
<label class="input-check-label" for="radio1"><b class="radio"></b>单选框</label>

css

// 单选与复选框,使用label伪类模拟选框,将关联的原生组件透明
.input-check{
// 原生控件透明
position:absolute;
opacity:;
}
// 标题
.input-check-label{
z-index:;
cursor:pointer;
//font-size:14px;
}
// 单选框与复选框的框框 ,是label的子元素
.input-check-label .check, .input-check-label .radio {
display:inline-block;
position:relative;
// 框的高与宽
height: 1.2em;
width: 1.2em;
// 离文字距离
margin-right: 4px;
border: 1px solid #999;
color: #292929;
background-color: #efefef;
// 对齐与标题底
vertical-align:text-bottom;
}
// 单选框是圆形框,
.input-check-label .radio{
border-radius:50%;
}
// input选中时,切换模拟DOM的选中状态
// input check选中之后,生成复选框选中状态的勾
.input-check:checked + .input-check-label .check:after {
// 绝对定位于框,左右对齐
position: absolute;
left:;
right:;
margin: auto;
// 勾是一个方形DOM的边框,去掉上边与左边,旋转45度后得到 这里利用伪类after添加空内容做一个边框
content: '';
width: 0.7em;
height: 1em;
border: 3px solid blue;
border-top: none;
border-left: none;
background: transparent;
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
// input-radio 选中之后,生成单选框中的圆点
.input-check:checked + .input-check-label .radio:after {
// 绝对定位于框,上下左右对齐
position: absolute;
left:;right:;top:;bottom:;
margin: auto;
// 圆点是圆角边框为50%的DOM
content: '';
width: 0.5em;
height: 0.5em;
background-color: blue;
border-radius: 50%;
}

效果截图

radio,check美化的更多相关文章

  1. [原创]纯JS实现网页中多选复选框checkbox和单选radio的美化效果

    图片素材: 最终效果图: <html><title> 纯JS实现网页中多选复选框checkbox和单选radio的美化效果</title><head>& ...

  2. HTML的checkbox和radio的美化

    checkbox和radio的美化 checkbox: <style type="text/css"> input[type="checkbox"] ...

  3. css input checkbox和radio样式美化

    参考:https://segmentfault.com/a/1190000004553258 http://www.haorooms.com/post/css_mh_ck_radio 思路都一样的,先 ...

  4. html radio check

    {% if classes|count > 1 %} <div class="class_checkbox" id="class_checkbox" ...

  5. jquery插件:select、checkbox、radio的美化

    引用文件:  <script src=”/InputPick/jqInputFormat.js” type=”text/javascript”></script> <li ...

  6. checkbox,radio自定义美化表单

    原理 利用label标签,包裹input的时候,点击label等同于点击input,再用背景图片显示选中和取消选中状态 效果 图片 复选 <!DOCTYPE html> <html& ...

  7. [label][翻译][JavaScript]如何使用JavaScript操纵radio和check boxes

    Radio 和 check boxes是form表单中的一部分,允许用户通过鼠标简单点击就可以选择.当与<textarea>元素的一般JavaScript操纵相比较,这些表单控件(form ...

  8. input标签的美化

    css input checkbox和radio样式美化:http://www.haorooms.com/post/css_mh_ck_radio 自定义 css checkbox 样式  :http ...

  9. JQuery基础总结上

    最近在慕课网学习JQuery基础课程,发现只是跟随网站的课程学习而不去自己总结扩展的话,很难达到真正学会理解的地步. 于是先在网站上草草过了一遍课程,然后借着今天的这个时间边记录边重新整理学习一下. ...

随机推荐

  1. iOS----------弹窗动画

    - (void)animationAlert:(UIView *)view { CAKeyframeAnimation *popAnimation = [CAKeyframeAnimation ani ...

  2. Kubernetes 集群日志管理 - 每天5分钟玩转 Docker 容器技术(180)

    Kubernetes 开发了一个 Elasticsearch 附加组件来实现集群的日志管理.这是一个 Elasticsearch.Fluentd 和 Kibana 的组合.Elasticsearch ...

  3. linux 按行分割文件

    $ sudo awk 'NR%2==1{close(p".txt");++p}{print > p".txt"}' test.txt $ sudo spl ...

  4. c/c++ 拷贝控制 右值与const引用

    拷贝控制 右值与const引用 背景:当一个函数的返回值是自定义类型时,调用侧用什么类型接收?? 1,如果自定义类型的拷贝构造函数的参数用const修饰了:可以用下面的方式接收. Test t2 = ...

  5. deepin 15.8桌面系统

    深度桌面环境是深度科技自主开发的美观易用.极简操作的桌面环境,主要由桌面.启动器.任务栏.控制中心.窗口管理器等组成,系统中预装了 WPS Office.搜狗输入法.有道词典.网易云音乐以及深度特色应 ...

  6. Bootstrap -- 文本,背景,其他样式

    Bootstrap -- 文本,背景,其他样式 1. 文本样式:展示了不同的文本颜色 使用文本样式: <!DOCTYPE html> <html> <head> & ...

  7. bootatrsp datetimepicker的初始化和阻止模态窗关闭(事件冒泡)

    1.github下载资源包  http://www.bootcss.com/p/bootstrap-datetimepicker/ 2.引入bootstrap-datetimepicker.min.c ...

  8. centos7下 svn的配置

    安装svn yum install subversion 查看安装版本 svnserve --version 创建svn版本库目录 mkdir -p /root/svn/test 创建svn版本库 s ...

  9. kafka-rest:A Comprehensive, Open Source REST Proxy for Kafka

    Ewen Cheslack-Postava  March 25, 2015  时间有点久,但讲的还是很清楚的 As part of Confluent Platform 1.0 released ab ...

  10. python之三元表达式、列表推导式、生成器表达式、递归、匿名函数、内置函数

    一 三元表达式.列表推导式.生成器表达式 一 三元表达式 name=input('姓名>>: ') res='SB' if name == 'alex' else 'NB' print(r ...