自定義單選框和多選框
阿新 • • 發佈：2018-12-10
說明:作為一個Java後端程式設計師，有時候也需要自己去寫些前端程式碼，所以將工作中用到的一些小知識做記錄分享。
1.自定義單選框（有圖片）
* ①先看效果圖：
* ②再獻上完整程式碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>radio and checkbox_1</title> <style> .outBorder{ top: 100px; width: 800px; height: 400px; margin: 0 auto; background: #ace0ea; } .title{ font-size: 18px; } /*單選框CSS*/ .radioCheck{ width: 470px; height:90px; margin: 0 auto; } .radioCheck label { margin-left: 50px; margin-right: 50px; } .radioCheck label font{ font-size: 16px; line-height: 47px; padding-left: 4px; } input[type="radio"]{ appearance: none; -webkit-appearance: none; outline: none; display:none; } label{ display:inline-block; cursor:pointer; } label input[type="radio"] + span{ float: left; width:35px; height:39px; display:inline-block; background:url(images/videoInterview/radio_box.png) no-repeat; background-position:-35px 0; } label input[type="radio"]:checked + span{ background-position:0 0; } /*多選框CSS*/ .checkboxCheck{ width: 470px; height:90px; margin: 0 auto; } .checkboxCheck label{ margin-left: 50px; } .checkboxCheck label font{ font-size: 16px; line-height: 47px; padding-left: 4px; } input[type="checkbox"]{ appearance: none; -webkit-appearance: none; outline: none; display:none; } label{ display:inline-block; cursor:pointer; } label input[type="checkbox"] + span{ float: left; width:35px; height:39px; display:inline-block; background:url(images/videoInterview/radio_box.png) no-repeat; background-position:-35px 0; } label input[type="checkbox"]:checked + span{ background-position:0 0; } </style> </head> <body> <div class="outBorder" > <div class="radioCheck"> <div class="title">單選框：</div> <label><input type="radio" name="role" value="1"><span></span><font>面試官</font></label> <label><input type="radio" name="role" value="2"><span></span><font>應聘者</font></label> </div> <div class="checkboxCheck"> <div class="title">多選框：</div> <label><input type="checkbox" name="college " value="1"><span></span><font>文科</font></label> <label><input type="checkbox" name="college " value="2"><span></span><font>理科</font></label> <label><input type="checkbox" name="college " value="3"><span></span><font>哲學</font></label> </div> </div> </body> </html>
* ③最後稍微做下註解說明：
i 、這是我用到的點選圖片（ps我也是會一點點的 *-*）
ii、起主要作用的是下面三行程式碼:
background:url(images/videoInterview/radio_box.png) no-repeat; //將圖片作為背景 no-repeat表示不重複
background-position:-35px 0; //圖片一般為35px，負數表示向右移動35px,初始顯示沒勾的框
background-position:0 0; //點選顯示有勾的框
不明白的可以複製上面完整程式碼自己嘗試一下，相信聰明的你們一試就會！
1.自定義單選框（無圖純文字）
* ①先看效果圖：
* ②再獻上完整程式碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>radio and checkbox_2</title> <style> .outBorder{ top: 100px; width: 800px; height: 400px; margin: 0 auto; background: #ace0ea; } .title{ font-size: 18px; } /*單選框CSS*/ .radioCheck{ width: 470px; height:90px; margin: 0 auto; } .radioCheck label { margin-left: 50px; margin-right: 50px; } .radioCheck label font{ line-height: 47px; padding-left: 4px; } input[type="radio"]{ appearance: none; -webkit-appearance: none; outline: none; display:none; } label{ display:inline-block; cursor:pointer; } label input[type="radio"] + span{ padding: 10px; font-size: 20px; font-weight: 500; cursor: pointer; } label input[type="radio"]:checked + span{ color:#0797b5; font-size: 26px; } label input[type="radio"]:hover + span{ color:#0797b5; } /*多選框CSS*/ .checkboxCheck{ width: 470px; height:90px; margin: 0 auto; } .checkboxCheck label{ margin-left: 50px; } .checkboxCheck label font{ line-height: 47px; padding-left: 4px; } input[type="checkbox"]{ appearance: none; -webkit-appearance: none; outline: none; display:none; } label{ display:inline-block; cursor:pointer; } label input[type="checkbox"] + span{ padding: 10px; font-size: 20px; font-weight: 500; cursor: pointer; } label input[type="checkbox"]:checked + span{ color:#0797b5; font-size: 26px; } label input[type="checkbox"]:hover + span{ color:#0797b5; } </style> </head> <body> <div class="outBorder" > <div class="radioCheck"> <div class="title">單選框：</div> <label><input type="radio" name="role2" value="1"><span><font>面試官</font></span></label> <label><input type="radio" name="role2" value="2"><span><font>應聘者</font></span></label> </div> <div class="checkboxCheck"> <div class="title">多選框：</div> <label><input type="checkbox" name="college2" value="1"><span><font>文科</font></span></label> <label><input type="checkbox" name="college2" value="2"><span><font>理科</font></span></label> <label><input type="checkbox" name="college2" value="3"><span><font>哲學</font></span></label> </div> </div> </body> </html>
* ③最後稍微做下註解說明：
原理和有圖的基本類似，不明白的可以複製程式碼，直接執行瀏覽器除錯一下即可！