jquery表单radioc heckbox美化选择获取值效果
代码语言:html
所属分类:表单美化
代码描述:jquery表单radioc heckbox美化选择获取值效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/lc_switch.css"> <style type="text/css" media="screen"> body{margin: 0; padding: 0; background-color: #f1f1f1;} .inner-input{background-color: #fff;} .inner-input{position: relative; box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 16px 16px; font-size: 16px; border-bottom: 1px solid #f2f2f2;} .inner-input label{height: 18px; width: 4.5em; -ms-flex-negative: 0; flex-shrink: 0; -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; margin-right: 16px; color: #333;} .to_chose{position: absolute; right: 15px; top: 10px; } .btn{position: fixed; width: 100%; height: auto; bottom: 0; border-top: 1px solid #f2f2f2; padding: 8px 16px; box-sizing: border-box; background-color: #fff;} button{width: 100%; line-height: 45px; font-size: 16px; border: none; border-radius: 3px; cursor: pointer; } button{background-color: #EC8336; color: #FFF;} .btn-groups button{background-color: #EC8336; margin: 0 16px; } .btn-groups button:hover{ background-color: #E5792A; } .btn-groups button.reset{background-color: #9E9E9E;} .btn-groups button.reset:hover{background-color: #BDBDBD;} </style> </head> <body> <div class="inner-input"> <label class="fixed-w" style="width: 8em;">10.销售部</label> <div class="to_chose"> <input type="checkbox" class="lcs_check" name="dept" value="10" autocomplete="off" /> </div> </div> <div class="inner-input"> <label class="fixed-w" style="width: 8em;">20.市场部</label> <div class="to_chose"> <input type="checkbox" class="lcs_check" name="dept" value="20" autocomplete="off" /> </div> </div> <div class="inner-input"> <label class="fixed-w" style="width: 8em;">30.财务部</label> <div class="to_chose"> <input type="checkbox" class="lcs_check" name=&qu.........完整代码请登录后点击上方下载按钮下载查看
网友评论0