radio,check美化

摘要:
单选框与复选框原生控件美化有多种解决方案,现在采用经典的input+label的方式自己实现一种思路:input和label通过id和for属性关联,点击label时,input选中状态改变透明化input,并且绝对定位,脱离文档流,不影响label空间占用label包含一个b元素用于模拟单选和复选的框框使用b元素的伪类,"画出"单选和复选的勾和圆点利用input:check选择器改变b元素的选中

单选框与复选框原生控件美化有多种解决方案,现在采用经典的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:0;
}
// 标题
.input-check-label{
    z-index:10;
    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:0;
    right:0;
    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:0;right:0;top:0;bottom:0;
    margin:auto;
    // 圆点是圆角边框为50%的DOM
    content:'';
    width:0.5em;
    height:0.5em;
    background-color:blue;
    border-radius:50%;
}

效果截图

radio,check美化第1张

radio,check美化第2张

免责声明:文章转载自《radio,check美化》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇豆瓣客户端(二)获取用户信息和搜索用户[C#]利用键代码自动转换生成字母键或其它键信息下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

C# 实现WebSocket通信

  本实例可通过web网页端进行测试,下面直接上代码。   首先要在NuGet导入“Fleck”包,.net framework4以上版本都可以选择。 using System; using System.Collections.Generic; using System.Linq; using System.Threading; namespace...

vue实现筛选功能,文字选中变色

1 <template> 2 <Poptip trigger="hover"title="Title"content="content"> 3 <i-button>Hover</i-button> 4 </Poptip> 5 <Poptip tri...

input type="submit" 和"button"的区别及表单提交

在一个页面上画一个按钮,有四种办法: 1 <input type="button" /> 这就是一个按钮。如果你不写javascript 的话,按下去什么也不会发生。 2 <input type="submit" /> 这样的按钮用户点击之后会自动提交 form,除非你写了javascript 阻止它。 3 <butto...

H5调用手机的相机/摄像/录音等功能 _input:file的capture属性说明

H5使用input标签调用系统默许相机,摄像,录音功能。使用input:file标签, 去调用系统默认相机,摄像,录音功能,其实是有个capture属性,直接说明需要调用什么功能: <input type="file" accept="image/*" capture="camera"> <input type="file" accept...

模糊查询

js页面$('.layui-btn').click(function () { var inputVal = $('.layui-input').val() table.reload('bookReload', { url: '/stu/findStu' ,where: { stuname :...

iptables禁止端口和开放端口

1、关闭所有的 INPUT FORWARD OUTPUT 只对某些端口开放。 下面是命令实现: iptables -P INPUT DROP iptables -P FORWARD DROP iptables -P OUTPUT DROP 再用命令 iptables -L -n 查看 是否设置好, 好看到全部 DROP 了 这样的设置好了,我们只是...