css美化checkbox多选效果代码
代码语言:html
所属分类:表单美化
代码描述:css美化checkbox多选效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { text-align:center; margin-top:50px; background:#9691F4; } .card { background:#fff; padding:50px 70px; border-radius:10px; width:200px; box-shadow:3px 4px 5px 4px #ddd; position:absolute; margin-bottom:50px; } .card-right { float:right; right:20%; top:10%; } .card-left { float:left; left:20%; top:10%; } /* checkbox square / Card right*/.card-right .checkbox { display:none; } .card-right .label { position:relative; font-family:sans-serif; display:block; padding-left:60px; font-size:22px; user-select:none; margin:30px 30px; } .card-right .check-mark { width:30px; height:30px; background-color:#E9F1FA; position:absolute; left:0; display:inline-block; top:0; border-radius:3px; } .card-right .label .checkbox:checked + .check-mark { background-color:#00116A; transition:.1s; } .card-right .label .checkbox:checked + .check-mark:after { content:""; position:absolute; width:10px; transition:.1s; height:5px; background:#00116A; top:45%; left:50%; border-left:2px solid #fff; border-bottom:2px solid #fff; transform:translate(-50%,-50%) rotate(-45deg); } /* checkbox circle / Card Left */.card-left .checkbox { display:none; } .card-left .label { position:relative; font-family:sans-serif; display:block; padding-left:60px; font-size:22px; user-select:none; margin:30px 30px; } .card-left .check-mark { width:30px; height:30px; background-color:#E9F1FA; position:absolute; left:0; display:inline-block; top:0; border-radius:50%; } .card-left .lab.........完整代码请登录后点击上方下载按钮下载查看
网友评论0