使用label標籤，修改checkbox預設樣式
阿新 • • 發佈：2019-01-02
<!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>