input 标签为checkbox时修改 checkbox的样式

checkbox时，第一种方法是可以加个label for来继承Input的ID，然后修改label就可以了。如下

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>修改checkbox样式</title>
</head>
<style>
    input{
        display: none;
    }
    input:checked+label {
        background-color: blue;
    }
    label {
        background-color: red;
        display: inline-block;
        width: 50px;
        height: 50px;
    }
</style>

<body>
    <input type="checkbox" name="next" id="id">
    <label for="id"></label>
</body>

</html>

第二种可以用伪类after或者before来更改

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>修改checkbox样式</title>
</head>
<style>
    input {
        position: relative;
        border: none;
    }

    input[type="checkbox"]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        background: #fff;
        width: 100%;
        height: 100%;
    }

    input[type="checkbox"]:checked::before {
        content: "\2713";
        border: 1px solid #2196f3;
        color: #2196f3;
    }
</style>

<body>
    <input type="checkbox" name="next" id="id">
</body>

</html>

 

posted @ 2020-08-11 17:21  H柷H  阅读(1881)  评论(0)  编辑  收藏  举报