風格無線電輸入和標籤分別

我目前瞭解的單選按鈕和我對你們一個問題：如何獲得單選圖標和表現不同的標籤嗎？讓我們做出了榜樣：風格無線電輸入和標籤分別

<p>You are a...</p> 
    <input type="radio" id="male" name="gender"/> 
    <label for="male">Male</label><br/> 
    <input type="radio" id="female" name="gender"/> 
    <label for="female">Female</label><br/>

enter image description here

有沒有辦法樣式的按鈕圖標，並相應的標籤（男/女）分別？

非常感謝！

來源

2017-01-23 Maria Francesca Colletti

請出示你的代碼，而你試圖使款式不同的東西。這張照片是您在瀏覽器中獲得的結果嗎？ – Matthew

使用input的checked僞類，你可以做這樣的事情

input { 
 
    display: none 
 
} 
 
label { 
 
    display: inline-block; 
 
    margin: 0 20px; 
 
    height: 50px; 
 
    width: 50px; 
 
    border: 1px solid black; 
 
    cursor: pointer; 
 
} 
 
#male:checked + label[for=male], 
 
#female:checked + label[for=female] { 
 
    border-style: dashed; 
 
} 
 
#male:checked + label[for=male] { 
 
    background: #f99; 
 
} 
 
#female:checked + label[for=female] { 
 
    background: lightblue; 
 
}

<p>You are a...</p> 
 
<input type="radio" id="male" name="gender" /> 
 
<label for="male">Male</label> 
 
<br/> 
 
<input type="radio" id="female" name="gender" /> 
 
<label for="female">Female</label> 
 
<br/>

來源

2017-01-23 22:11:40 LGSon

風格無線電輸入和標籤分別

回答

相關問題