Radio 必須點到 方框 才能選取，實務上會想要點擊 Label 也相當於選擇 Radio，可將 <input> 與 <label> 合作達成。
Version
HTML 5
Radio in Label
當 cursor 指向 label 時也會出現 pointer，表示點下 label 亦能點選 radio。
<template>
<div class="radio">
<label><input type="radio" name="habit">Swimming</label>
<label><input type="radio" name="habit">Reading</label>
<label><input type="radio" name="habit">Shopping</label>
</div>
</template>
<style>
.radio label:hover, .radio input:hover {
cursor: pointer;
}
</style>
第 2 行
<div class="radio">
<label><input type="radio" name="habit">Swimming</label>
<label><input type="radio" name="habit">Reading</label>
<label><input type="radio" name="habit">Shopping</label>
</div>
- 將
<input>包在<label>內，如此當點下<label>時相當於選擇 radio - 將三個
<label>統一放在<div>下設定 CSS
10 行
.radio label:hover, .radio input:hover {
cursor: pointer;
}
- 雖然
<label>可點選，但 user 並不知道，因此在label:hover加上cursor: pointer顯示 cursor 提醒 - 希望
<input>也能如 label 有 cursor，因此在input:hover加上cursor: pointer顯示 cursor 提醒 - 將
label:hover與input:hover都放在.radio一起設定
Conclusion
- 實務上 radio 都會搭配
<label>一起使用，可再搭配hover加上 pointer