使用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);
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持澳门金沙网上娱乐。

相关文章

  • 纯CSS3实现漂亮的input输入框动画样式库(Text input love)

    本文分享一个用纯 CSS3 实现的,漂亮的 input 输入框动画样式库-Text input love。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-29
  • css3实现input输入框颜色渐变发光效果代码

    css3都推出好久了,虽然各大主流浏览器对其兼容性还不是很好,特别是IE…但通过添加-moz- -webkit-这样的前缀可以在chrome和Firefox下获得更好的效果,还是Transition实现
    2014-04-02
  • css中使input输入框与img(图片)在同一行居中对齐

    如何让input输入框与img在同一行居中对齐,由于经常会使用到,默认情况下将input和img放同一行,img标签总是比input高出一个头,很难看,大家可以参考下本文或许有所帮助
    2013-10-09
  • input输入框中有图片怎么使用css布局实现

    input框中有图片的情况下如何使用css实现,为了美观、形象,一般都会在用户名,密码等输入框中加一个图片,其实很简单,具体的实现如下,感兴趣的朋友可以参考下
    2013-08-01
  • CSS教程:网页input输入框立体效果

    网页制作Webjx文章简介:去年常常玩开心网,耗在上面的时间也不少,停车位、买卖奴隶等等。虽然开心网也不是始祖(模仿facebook和校内)。但娱乐之余,我还是好好的研究了
    2009-04-02

最新评论