使用CSS3实现input多选框自定义样式的方法示例

  发布时间:2019-07-19 16:31:59   作者:没落的宅男贵族   我要评论
这篇文章主要介绍了使用CSS3实现input多选框自定义样式的方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

原理:首先把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滚动条样式修改的代码

    这篇文章主要介绍了css滚动条样式修改的代码,需要的朋友可以参考下
    2019-10-30
  • CSS 设置滚动条样式的实现

    这篇文章主要介绍了CSS 设置滚动条样式的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-10-11
  • 纯CSS3 Material Design风格单选框和复选框特效

    一个使用纯CSS3制作Material Design风格单选框和复选框的插件,只需引入指定的CSS文件,然后配合特定的HTML结构,就可以生成漂亮的风格单选框和复选框,欢迎下载
    2019-09-30
  • CSS Reset 样式重置的实现示例

    这篇文章主要介绍了CSS Reset 样式重置的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学
    2019-08-16
  • css 设置overflow:scroll 滚动条的样式

    这篇文章主要介绍了css 设置overflow:scroll 滚动条的样式 ,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-07-25
  • 如何只在IE上加载CSS样式表

    IE一直是特殊的一个浏览器,我们可以使用一些方法来指定样式表只在IE浏览器下被加载。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-02-20
  • css清除默认样式和设置公共样式的方法

    本文通过代码给大家介绍css清除默认样式和设置公共样式的方法,需要的朋友参考下吧
    2019-10-31

最新评论