Làm cách nào để thay đổi màu nền trên hộp kiểm đầu vào bằng css?

Question

Xin chào Bạn bè tất cả những gì tôi đang cố gắng làm là thay đổi màu nền của hộp kiểm. Tôi mệt mỏi nhiều thứ nhưng không có gì hiệu quả. Có thể một số giúp đỡ?

input[type="checkbox"] { 
     background: #3d404e; 
     border: #7f83a2 1px solid; 
    } 

Answer 1

tôi luôn luôn sử dụng các yếu tố giả :before và :after cho việc thay đổi sự xuất hiện của hộp kiểm và nút radio. nó hoạt động như một sự quyến rũ.

Tham khảo này link để biết thêm

bước

1. Ẩn hộp kiểm mặc định sử dụng quy tắc css như visibility:hidden hoặc opacity:0 hoặc position:absolute;left:-9999px, vv
2. Tạo một hộp kiểm giả sử dụng :before phần tử và vượt qua không gian trống hoặc không vi phạm '\00a0';
3. Khi hộp kiểm ở trạng thái :checked, hãy chuyển mã unicode content: "\2713", là dấu kiểm;
4. Thêm :focus kiểu để làm cho hộp kiểm có thể truy cập được.
5. Xong

Đây là cách tôi đã làm.

.box { 
 
    background: #666666; 
 
    color: #ffffff; 
 
    width: 250px; 
 
    padding: 10px; 
 
    margin: 1em auto; 
 
} 
 
p { 
 
    margin: 1.5em 0; 
 
    padding: 0; 
 
} 
 
input[type="checkbox"] { 
 
    visibility: hidden; 
 
} 
 
label { 
 
    cursor: pointer; 
 
} 
 
input[type="checkbox"] + label:before { 
 
    border: 1px solid #333; 
 
    content: "\00a0"; 
 
    display: inline-block; 
 
    font: 16px/1em sans-serif; 
 
    height: 16px; 
 
    margin: 0 .25em 0 0; 
 
    padding: 0; 
 
    vertical-align: top; 
 
    width: 16px; 
 
} 
 
input[type="checkbox"]:checked + label:before { 
 
    background: #fff; 
 
    color: #333; 
 
    content: "\2713"; 
 
    text-align: center; 
 
} 
 
input[type="checkbox"]:checked + label:after { 
 
    font-weight: bold; 
 
} 
 

 
input[type="checkbox"]:focus + label::before { 
 
    outline: rgb(59, 153, 252) auto 5px; 
 
}

<div class="content"> 
 
    <div class="box"> 
 
    <p> 
 
     <input type="checkbox" id="c1" name="cb"> 
 
     <label for="c1">Option 01</label> 
 
    </p> 
 
    <p> 
 
     <input type="checkbox" id="c2" name="cb"> 
 
     <label for="c2">Option 02</label> 
 
    </p> 
 
    <p> 
 
     <input type="checkbox" id="c3" name="cb"> 
 
     <label for="c3">Option 03</label> 
 
    </p> 
 
    </div> 
 
</div>

nhiều phong cách hơn khi sử dụng :before và :after

body{ 
 
    font-family: sans-serif; 
 
} 
 

 
.checkbox { 
 
    margin: 50px auto; 
 
    position: relative; 
 
    display: block; 
 
    width: 100px; 
 
} 
 

 
input[type="checkbox"] { 
 
    width: auto; 
 
    opacity: 0.00000001; 
 
    position: absolute; 
 
    left: 0; 
 
    margin-left: -20px; 
 
} 
 
.helper { 
 
    position: absolute; 
 
    top: -4px; 
 
    left: -4px; 
 
    cursor: pointer; 
 
    display: block; 
 
    font-size: 16px; 
 
    user-select: none; 
 
    color: #e7e7e7; 
 
} 
 
.helper:before { 
 
    content: ''; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    margin: 4px; 
 
    width: 22px; 
 
    height: 22px; 
 
    transition: transform 0.28s ease; 
 
    border-radius: 3px; 
 
    border: 2px solid #7bbe72; 
 
} 
 
.helper:after { 
 
    content: ''; 
 
    display: block; 
 
    width: 10px; 
 
    height: 5px; 
 
    border-bottom: 2px solid #7bbe72; 
 
    border-left: 2px solid #7bbe72; 
 
    -webkit-transform: rotate(-45deg) scale(0); 
 
    -moz-transform: rotate(-45deg) scale(0); 
 
    -ms-transform: rotate(-45deg) scale(0); 
 
    transform: rotate(-45deg) scale(0); 
 
    position: absolute; 
 
    top: 12px; 
 
    left: 10px; 
 
} 
 
input[type="checkbox"]:checked ~ .helper::before { 
 
    color: #7bbe72; 
 
} 
 

 
input[type="checkbox"]:checked ~ .helper::after { 
 
    -webkit-transform: rotate(-45deg) scale(1); 
 
    -moz-transform: rotate(-45deg) scale(1); 
 
    -ms-transform: rotate(-45deg) scale(1); 
 
    transform: rotate(-45deg) scale(1); 
 
} 
 

 
.checkbox label { 
 
    min-height: 24px; 
 
    padding-left: 35px; 
 
    margin-bottom: 0; 
 
    font-weight: normal; 
 
    cursor: pointer; 
 
    vertical-align: sub; 
 
} 
 
input[type="checkbox"]:focus + label::before { 
 
    outline: rgb(59, 153, 252) auto 5px; 
 
}

<div class="checkbox"> 
 
    <label> 
 
    <input type="checkbox" name="" value=""> 
 
    <i class="helper"></i>Checkbox 
 
    </label> 
 
</div>