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

本文转载自查看原文 2020-08-11 17:21 909 css

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>

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 修改 input[type="radio"] 和 input[type="checkbox"] 的默认样式 vue input复选框checkbox默认样式纯css修改 React 项目中修改 Ant Design 的默认样式(Input Checkbox 等等 checkbox样式修改 input默认样式与修改 audio标签的样式修改 select input 默认样式修改 input点击修改样式关于无法修改CheckBox样式的解决方案动态修改a标签的css样式