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="checkbox"]的樣式修改 input[type="radio"] 和 input[type="checkbox"] 的默認樣式 checkbox默認樣式修改 checkbox樣式修改 input復選框checkbox默認樣式純css修改 Input checkbox 添加樣式背景 input復選框checkbox默認樣式純css修改 vue input復選框checkbox默認樣式純css修改 React 項目中修改 Ant Design 的默認樣式(Input Checkbox 等等 input checkbox 禁止選中/修改