使用文本充當單選按鈕/使字符串變成單選按鈕

Question

我想使文本作爲html的單選按鈕工作，所以從多個選項當我單擊一個選項（文本）時，它會突出顯示（選定）價值向前。

Answer 1

最直接的方法是簡單地使用單選按鈕，這使得你看不見。然後將文本轉換爲單選按鈕的標籤。
我將每個單選按鈕及其標籤放在一個包裝中，以使它們更容易定位。

<div class="radiowrapper" id="wrap1"> 
    <input type="radio" name="problem" value="headaches" id="problem1"> 
    <label for="problem1">I get headaches</label> 
</div> 
<div class="radiowrapper" id="wrap2"> 
    <input type="radio" name="problem" value="teeth" id="problem2"> 
    <label for="problem2">I grind my teeth</label> 
</div> 
<div class="radiowrapper" id="wrap3"> 
    <input type="radio" name="problem" value="heartburn" id="problem3"> 
    <label for="problem3">I experience heart burn</label> 
</div> 

而CSS：

.radiowrapper {position:absolute;} 

.radiowrapper input {visibility:hidden; width:0;} 

.radiowrapper label:hover {font-weight:bold} 

.radiowrapper input:checked + label {font-weight:bold; text-transform:uppercase} 

#wrap1 {left:100px; top:50px;} 

#wrap2 {left:80px; top:100px;} 

#wrap3 {left:0px; top:150px;} 

見jsFiddle。