通過label標籤重置input[radio]樣式
阿新 • • 發佈：2019-02-20
一、基於預設的input[radio]標籤很醜，很多時候都需要重寫樣式，下面就介紹下通過label標籤重置input[radio]標籤的方法；
二、準備首先我們需要給lable標籤繫結input，然後再通過一個標籤包含說明文字（這裡選用span標籤），程式碼如下
三、接下來要在樣式上做文章了，先把input的原樣式隱藏，然後給label標籤用背景圖代替原有樣式。這裡需要注意的是display的設定，因為label本身是行內元素，如果需要選項在一行設定inline-block，需要換行則設定block。否則無法給label設定寬高，點選文字時候將沒法觸發label。樣式如下<div class="wrap"> <input type="radio" id="option1" name="mode" value = "0" class="option-radio" checked /> <label id="firstLabel" for="option1"><span class="">這是一行優雅的程式碼</span> </label> <input type="radio" id="option2" name="mode" value = "1" class="option-radio" /> <label for="option2"><span class="">這是一行特別優雅的程式碼</span></label> </div>
四、效果圖.option-radio{ display: none; } .option-radio+label{ margin-top: 20px; display: block; height: 20px; width: 200px; text-indent: 23px; background: url("nocheacked.png") no-repeat left center; cursor: pointer; } .option-radio:checked+label{ background: url("cheacked.png") no-repeat left center; } #firstLabel{ width: 170px; } .wrap{ margin:15px; }
五、完整程式碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>改變單選樣式</title> </head> <style> .option-radio{ display: none; } .option-radio+label{ margin-top: 20px; display: block; height: 20px; width: 200px; text-indent: 23px; background: url("nocheacked.png") no-repeat left center; cursor: pointer; } .option-radio:checked+label{ background: url("cheacked.png") no-repeat left center; } #firstLabel{ width: 170px; } .wrap{ margin:15px; } </style> <body> <div class="wrap"> <input type="radio" id="option1" name="mode" value = "0" class="option-radio" checked /> <label id="firstLabel" for="option1"><span class="">這是一行優雅的文字</span> </label> <input type="radio" id="option2" name="mode" value = "1" class="option-radio" /> <label for="option2"><span class="">這是一行特別優雅的文字</span></label> </div> </body> </html>