伪类复选框改变样式

最新推荐文章于 2022-08-02 10:42:55 发布

坏丶毛病

最新推荐文章于 2022-08-02 10:42:55 发布

阅读量583

点赞数

分类专栏： CSS-成长之路 HTML-成长之路文章标签：复选框 css复选框复选框改变样式伪类做复选框坏丶毛病

一只努力学习进步的web前端小菜鸟。转载请声明来源。

本文链接：https://blog.csdn.net/qq_43363884/article/details/88733794

版权

CSS-成长之路同时被 2 个专栏收录

12 篇文章 1 订阅

订阅专栏

HTML-成长之路

8 篇文章 0 订阅

订阅专栏

大家在开发的过程中，肯定都用过复选框，那么大家有没有为了改变样式而烦恼过？

这里给大家介绍特别简单的一种方式。

话不多说，上代码。

<!DOCTYPE html>
<html style="height: 100%">

<head>
    <meta charset="utf-8">
</head>
<style type="text/css">
  html,body{
    width: 100%;
    height: 100%;
  }
  .uls span {
      position: relative;
  }

  .uls .input_check {
      position: absolute;
      visibility: hidden;
  }

  .uls .input_check+label {
      display: inline-block;
      width: 35px;
      height: 35px;
      border: 1px solid #f61a63;
      display: flex;
  }

  .uls .input_check:checked+label:after {
      content: "√";
      color:red;
      font-size: 30px;
      position: absolute;
      left: 7px;
      top: -1px;
  }
</style>

<body style="height: 100%; margin: 0">
    <ul class="uls">
        <span>
            <input type="checkbox" class="input_check" id="check4">
            <label for="check4"></label>
        </span>
    </ul>
</body>

</html>

这里通过input的checkbox复选框，设置id，通过label的for来绑定这个复选框，然后是一个伪类实现效果。

效果图：

好了，这样就实现了一个简单的复选框效果，大家可以随意更改自己的样式。

如有问题，请指出，接受批评。

个人微信公众号：

坏丶毛病

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
伪类复选框改变样式

大家在开发的过程中，肯定都用过复选框，那么大家有没有为了改变样式而烦恼过？这里给大家介绍特别简单的一种方式。话不多说，上代码。<!DOCTYPE html><html style="height: 100%"><head> <meta charset="utf-8"></head><style typ...
复制链接

扫一扫