radio,check美化
单选框与复选框原生控件美化有多种解决方案,现在采用经典的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美化的更多相关文章
- [原创]纯JS实现网页中多选复选框checkbox和单选radio的美化效果
图片素材: 最终效果图: <html><title> 纯JS实现网页中多选复选框checkbox和单选radio的美化效果</title><head>& ...
- HTML的checkbox和radio的美化
checkbox和radio的美化 checkbox: <style type="text/css"> input[type="checkbox"] ...
- css input checkbox和radio样式美化
参考:https://segmentfault.com/a/1190000004553258 http://www.haorooms.com/post/css_mh_ck_radio 思路都一样的,先 ...
- html radio check
{% if classes|count > 1 %} <div class="class_checkbox" id="class_checkbox" ...
- jquery插件:select、checkbox、radio的美化
引用文件: <script src=”/InputPick/jqInputFormat.js” type=”text/javascript”></script> <li ...
- checkbox,radio自定义美化表单
原理 利用label标签,包裹input的时候,点击label等同于点击input,再用背景图片显示选中和取消选中状态 效果 图片 复选 <!DOCTYPE html> <html& ...
- [label][翻译][JavaScript]如何使用JavaScript操纵radio和check boxes
Radio 和 check boxes是form表单中的一部分,允许用户通过鼠标简单点击就可以选择.当与<textarea>元素的一般JavaScript操纵相比较,这些表单控件(form ...
- input标签的美化
css input checkbox和radio样式美化:http://www.haorooms.com/post/css_mh_ck_radio 自定义 css checkbox 样式 :http ...
- JQuery基础总结上
最近在慕课网学习JQuery基础课程,发现只是跟随网站的课程学习而不去自己总结扩展的话,很难达到真正学会理解的地步. 于是先在网站上草草过了一遍课程,然后借着今天的这个时间边记录边重新整理学习一下. ...
随机推荐
- onScrollChanged()
转载请标明出处:http://www.cnblogs.com/tangZH/p/8428100.html onScrollChanged里面有四个参数 @Overrideprotected void ...
- 通过fromdata实现上传文件
其实呢,文件上传的插件很多,可是现在做的东西要求尽量少用插件,所以就自己写了一下. 之前也用node写过对文件处理方面的东西,这次用php写着试一下. a.html文件 <!DOCTYPE ht ...
- Android远程桌面助手扩展之微信跳一跳辅助
微信跳一跳的外挂辅助已是五花八门,万能的TB上也有了各种明码标价的代练.微信小程序游戏的火爆甚至带火了手游外挂产业.另一方面,跳一跳游戏也在不断更新,防止使用外挂刷高分.Android远程桌面助手支持 ...
- Xamarin 打包生成 Android apk 文件
Visual Studio 支持 apk 发布 Xamarin.Forms项目或Xamarin.Android项目开发完成之后需要发布.比较常规的发布方式是生成 apk 文件,微软也考虑到开发者有发布 ...
- Android预置Apk方法
这一套8.0过时了 需要修改pms代码 否则apk会被pms删除掉 因为工作需要,经常要开发和合入系统App,所以在此开篇作为收集和记录Android合入系统应用的方法,以备日后查阅. 一.预置apk ...
- Python HTML解析器BeautifulSoup(爬虫解析器)
BeautifulSoup简介 我们知道,Python拥有出色的内置HTML解析器模块——HTMLParser,然而还有一个功能更为强大的HTML或XML解析工具——BeautifulSoup(美味的 ...
- C# 一般处理程序ashx接收服务端post过来json数据
这个和前端js的接收方式有点不一样,前端接收用request.form["xxx"]即可
- IIS 反向代理到 Apache、Tomcat
将请求的网址重写重定向到其它网址.当80端口被占用无法同时使用两个Web服务的解决方案,使得IIS和Apache Tomcat 共存 环境 WindowServer 2008 IIS7 Apache ...
- 如何在 windows server 2008 上面 挂载NFS
首先, 你在一台服务器上面配置好NFS 服务器:然后按照一下步骤: mounting the nfs on windows server 2008 r2: open Windows Server 的D ...
- 详解vuex结合localstorage动态监听storage的变化
这篇文章主要介绍了详解vuex结合localstorage动态监听storage的变化,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 需求:不同组件间共用同一数据,当一个 ...