zoukankan      html  css  js  c++  java
  • 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;
             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;
             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>
  • 相关阅读:
    软件工程第一次作业--IT女的进化
    软件工程第五次作业
    软件工程第四次作业
    软件工程第三次作业
    软件工程第二次作业
    v0.1beta
    第二次结对作业
    软件工程结对作业
    软件工程第三次作业
    软件工程第二次作业
  • 原文地址:https://www.cnblogs.com/huzhuhua/p/13476972.html
Copyright © 2011-2022 走看看