最新 css 美化checkbox样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>css 美化checkbox样式</title> <style> .checkbox { position: relative; height: 30px; } .checkbox input[type='checkbox'] { position: absolute; left: 0; top: 0; width: 20px; height: 20px; opacity: 0; } .checkbox label { position: absolute; left: 30px; top: 0; height: 20px; line-height: 20px; } .checkbox label:before { content: ''; position: absolute; left: -30px; top: 0; width: 20px; height: 20px; border: 1px solid #ddd; border-radius: 50%; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; } .checkbox label:after { content: ''; position: absolute; left: -22px; top: 3px; width: 6px; height: 12px; border: 0; border-right: 1px solid #fff; border-bottom: 1px solid #fff; background: #fff; transform: rotate(45deg); -webkit-transform: rotate(45deg); transition: all 0.3s ease; -webkit-transition: all 0.3s ease; } .checkbox input[type='checkbox']:checked+label:before { background: #4cd764; border-color: #4cd764; } .checkbox input[type='checkbox']:checked+label:after { background: #4cd764; } </style> </head> <body> <div class='checkbox'> <input type='checkbox' id='checkbox1' name='checkboox[]'> <label for='checkbox1'>篮球</label> </div> </body> <script> </script> </html>
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。