使用CSS3实现input多选框自定义样式的方法示例
发布时间：2019-07-19 16:31:59 作者：没落的宅男贵族 
我要评论
我要评论这篇文章主要介绍了使用CSS3实现input多选框自定义样式的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
原理：首先把input元素隐藏掉，然后用CSS设置label元素（其他元素也可以）的样式，选中时的样式使用input:check+label选中label，无须使用图片和JS
效果预览
html代码
<div class="radio">
<input type="checkbox" id="sex1">
<label for="sex1"></label>
男
</div>
<div class="radio">
<input type="checkbox" id="sex2">
<label for="sex2"></label> 女
</div>
CSS代码
.radio {
position: relative;
display: inline-block;
margin-right: 12px;
}
.radio input {
width: 15px;
height: 15px;
appearance: none;/*清楚默认样式*/
-webkit-appearance: none;
opacity: 0;
outline: none;
z-index: 8; /*让input层级高于label，使之能选中*/
}
.radio label {
position: absolute;
left: 0;
top: 6px;
width: 15px;
height: 15px;
border: 1px solid #3582E9;
}
.radio input:checked+label::after {
content: "";
position: absolute;
left: 4px;
top: 0px;
/* 这里显示矩形的一半边框再旋转45度来实现对勾样式 */
width: 5px;
height: 12px;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
transform: rotate(45deg);
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持程序员之家。
相关文章
- 这篇文章主要介绍了css滚动条样式修改的代码,需要的朋友可以参考下2019-10-30
这篇文章主要介绍了CSS 设置滚动条样式的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-10-11
纯CSS3 Material Design风格单选框和复选框特效
一个使用纯CSS3制作Material Design风格单选框和复选框的插件，只需引入指定的CSS文件，然后配合特定的HTML结构，就可以生成漂亮的风格单选框和复选框，欢迎下载2019-09-30
这篇文章主要介绍了CSS Reset 样式重置的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学2019-08-16- 这篇文章主要介绍了css 设置overflow:scroll 滚动条的样式 ，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-07-25
- IE一直是特殊的一个浏览器，我们可以使用一些方法来指定样式表只在IE浏览器下被加载。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-20
- 本文通过代码给大家介绍css清除默认样式和设置公共样式的方法，需要的朋友参考下吧2019-10-31
最新评论