使用label标签，修改checkbox默认样式

来源：互联网发布：编程熟练编辑：程序博客网时间：2024/06/06 19:26
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>checkbox css change</title><style type="text/css">input[type="checkbox"] + label {    cursor: pointer;    font-size: 1em;}[id^="checkbox-"] + label {    background-color: #ffffff;    border: 1px solid #666666;    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);    padding: 9px;    border-radius: 3px;    display: inline-block;    vertical-align: middle;}[id^="checkbox-"] + label:active {    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);}[id="checkbox-1"]:checked + label {    background-color: #F47164;    border: 1px solid #F47164;}[id="checkbox-2"]:checked + label {    background-color: #84CBC5;    border: 1px solid #84CBC5;}[id="checkbox-3"]:checked + label {    background-color: #F8D25D;    border: 1px solid #F8D25D;}</style></head><body>    <label style="margin-left: 55px; margin-right: 16px;">状态:</label>    <input type="checkbox" value="0" class="check_view_state"        id="checkbox-1" style="display: none;">    <label for="checkbox-1"></label>    <span class="status">未读</span>    <input type="checkbox" value="1" class="check_view_state"        id="checkbox-2" style="display: none;">    <label for="checkbox-2"></label>    <span class="status">已读</span>    <input type="checkbox" value="2" class="check_view_state"        id="checkbox-3" style="display: none;">    <label for="checkbox-3"></label>    <span class="status">未授权</span></body></html>
阅读全文
1 0