单选框与复选框原生控件美化有多种解决方案,现在采用经典的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. 使用Python下载工具you-get下载媒体文件

    You-Get是一个基于 Python 3 的下载工具.使用 You-Get 可以很轻松的下载到网络上的视频.图片及音乐. 使用you-get下载媒体文件 1.安装Python(步骤详情见另一篇文章) ...

  2. 从零学习Fluter(三):Flutter的路由跳转以及state的生命周期

    今天继续研究Flutter,我是在flutter1.0发布后,才玩flutter的,发现在此之前,许多人已经先发制人,玩起了flutter,不知不觉中,我已经被别人摔在了起跑线上,玩过flutter后 ...

  3. Android studio,第一个生成,调用成功的jni(说多了都是泪)

    0x01 序言: 泪从何处说起呢?其实很早以前就用过android studio写过c++,但是,但是一直没有成功生成过so文件,所以心中一直有一个纠结...为什么不成功呢... 直到今天,由于工作的 ...

  4. 章节八、2-火狐的插件TryXPath

    一.火狐上有一个很好用的插件TryXPath能够进行元素定位(安装) 1.打开图中标识的菜单 2.然后点击“扩展”,搜索“xpath” 3.然后安装“TryXPath” 4.安装成功后右上角x显示一个 ...

  5. MongoDB 执行mongoexport时异常及分析(关于数字类型的查询)

    今天在用mongoexport导出满足一定条件下的数据时,遇到了一个报错,现纪录下来,并且针对此错误对MongoDB 的 数字类型 做了进一步的学习. 背景 及 报错信息 今天接到一个业务需求,需要从 ...

  6. 彻底删除mysql服务(清理注册表)

    由于安装某个项目的执行文件,提示要卸载MySQL以便它自身MySQL安装,然后我禁用了MYSQL服务,再把这个文件夹删除后,发现还是提示请卸载MYSQL服务. 解决步骤: 1.以管理员身份运行命令提示 ...

  7. c/c++ 多线程 一个线程等待某种事件发生

    多线程 一个线程等待某种事件发生 背景:某个线程在能够完成其任务之前可能需要等待另一个线程完成其任务. 例如:坐夜间列车,为了能够不坐过站, 1,整夜保持清醒,但是这样你就会非常累,不能够睡觉. 2, ...

  8. 英语口语练习系列-C05-水电

    <登幽州台歌>·陈子昂 陈子昂(公元659-公元700年),唐代文学家,初唐诗文革新人物之一. Num 诗句 1 前不见古人, 2 后不见来者. 3 念天地之悠悠, 4 独怆然而涕下! T ...

  9. VMware14虚拟机下安装Centos6.5

    一.下载VMware14,CentOS6.5光盘映像文件. https://pan.baidu.com/s/1WaTBnYuNC5dLYM_Ra2bjBQ 二.安装过程 1.打开VMware虚拟机 — ...

  10. HBase Rowkey 设计指南

    为什么Rowkey这么重要 RowKey 到底是什么 我们常说看一张 HBase 表设计的好不好,就看它的 RowKey 设计的好不好.可见 RowKey 在 HBase 中的地位.那么 RowKey ...