label模擬radio、checkbox，自定義radio和checkbox
阿新 • • 發佈：2019-01-25
最近做的專案選項框比較多，為了讓介面看起來更加美觀，決定自定義radio和checkbox，功能不變的情況下提高使用者體驗。
label 元素不會向用戶呈現任何特殊效果。不過，它為滑鼠使用者改進了可用性。如果您在 label 元素內點選文字，就會觸發此控制元件。就是說，當用戶選擇該標籤時，瀏覽器就會自動將焦點轉到和標籤相關的表單控制元件上。
這裡比較關鍵的一點是用到label的for屬性。
w3c的label介紹：
<label> 標籤為 input 元素定義標註（標記）。label 元素不會向用戶呈現任何特殊效果。不過，它為滑鼠使用者改進了可用性。如果您在 label 元素內點選文字，就會觸發此控制元件。就是說，當用戶選擇該標籤時，瀏覽器就會自動將焦點轉到和標籤相關的表單控制元件上。
<label> 標籤的 for 屬性應當與相關元素的 id 屬性相同。
所以當我們為label用for屬性綁定了指定元素id時候，只要我們點選label，就會觸發繫結的元素。可以在w3c檢視例子。http://www.w3school.com.cn/tiy/t.asp?f=html_label
好了原理講明白後，就可以開始自定義我們的radio和checkbox。大致思路就是用label繫結radio，然後設定radio為不顯示，在自定義label的樣式就行了。
html程式碼：
css程式碼：<div class="testOptions"> <ul> <li><input type="radio" id="radio01" name="check"><label for="radio01"></label>選項</li> <li><input type="radio" id="radio02" name="check"><label for="radio02"></label>選項</li> <li><input type="radio" id="radio03" name="check"><label for="radio03"></label>選項</li> <li><input type="radio" id="radio04" name="check"><label for="radio04"></label>選項</li> </ul> <ul> <li><input type="checkbox" id="checkbox01" name="check"><label for="checkbox01"></label>選項</li> <li><input type="checkbox" id="checkbox02" name="check"><label for="checkbox02"></label>選項</li> <li><input type="checkbox" id="checkbox03" name="check"><label for="checkbox03"></label>選項</li> <li><input type="checkbox" id="checkbox04" name="check"><label for="checkbox04"></label>選項</li> </ul> </div> <div class="_testOptions"> <ul> <li><input type="checkbox" id="checkbox001" name="check"><label for="checkbox001"></label>選項</li> <li><input type="checkbox" id="checkbox002" name="check"><label for="checkbox002"></label>選項</li> <li><input type="checkbox" id="checkbox003" name="check"><label for="checkbox003"></label>選項</li> <li><input type="checkbox" id="checkbox004" name="check"><label for="checkbox004"></label>選項</li> </ul> </div>
效果圖：（一個利用偽元素打鉤，一個圖片）.testOptions li,._testOptions li{margin: 5px 0px;} /*隱藏選項框*/ .testOptions input[type='checkbox'],.testOptions input[type='radio'], ._testOptions input[type='checkbox']{ visibility: hidden; cursor: pointer; } /*設定label樣式*/ .testOptions input[type='radio']+label,.testOptions input[type='checkbox']+label, ._testOptions input[type='checkbox']+label{ display: inline-block; vertical-align: top; width: 1.3em; height: 1.3em; margin-right:5px; position: relative; background-color: #d8d4d4; transition: background 0.5s linear; box-sizing:border-box; -webkit-transition: background 0.3s linear; -webkit-box-sizing:border-box; } /*相鄰選擇器來模擬選項被選擇的效果*/ .testOptions input[type='radio']+label{border-radius: 50%;} .testOptions input[type='radio']:checked+label {border:0.35em #d8d4d4 solid;background-color: #0ab5f1;} .testOptions input[type='checkbox']:checked+label {background-image: url("image/check_32px.png");background-size: 100% 100%;} ._testOptions input[type='checkbox']:checked+label:after{content: "√";font-size: 20px;font-weight:bold;color: #0ab5f1;} </style>