修改checkbox的默认样式

最新推荐文章于 2024-05-21 15:46:26 发布

我有一颗发财树

最新推荐文章于 2024-05-21 15:46:26 发布

阅读量576

点赞数

本文链接：https://blog.csdn.net/World_And_Molly/article/details/119742233

版权

有时候要根据需要修改checkbox的样式，通过写一个label标签，里面包一个span和一个表单控件

样式的实现是结合了伪类来实现。

以下是我自己迷惑的地方，自己为自己解答：

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

:after选择器在官方定义中是指在被选元素的内容后面插入的内容，因为这里不需要文字内容所以content：" "，

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .ipt {
            display: none;
        }
        .span {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 1px solid red;
            border-radius: 10px;
        }
      /* 选中的border的颜色建议和未选中的border的颜色一样 */
        .ipt:checked+.span:after {
            content: "";
            position: absolute;
            width: 12px;
            height: 12.5px;
            background-color: #165;
            border: 4px solid red;   
            border-radius: 10px;
        }
    </style>
</head>

<body>
    <label class="checkBox">
        全选：<input class="ipt" type="checkbox">
        <span class="span"></span>
    </label>
</body>

</html>

本人是想通过此平台整理记录自己的笔记，如有问题，请指正；如有侵权，请与我本人联系转私密，非常感谢。

我有一颗发财树

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
修改checkbox的默认样式

有时候要根据需要修改checkbox的样式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"
复制链接

扫一扫