標籤輸入類型無線電

我想輸入類型單選按鈕，它不起作用。問題在於輸入標籤位於標籤標籤內，我無法更改它。標籤輸入類型無線電

input{ 
 
    display:none; 
 
} 
 

 

 
label:before { 
 
    content: ""; 
 
    display: inline-block; 
 
    width: 16px; 
 
    height: 16px; 
 
    margin-right: 10px; 
 
    bottom: 1px; 
 
    background-color: #aaa; 
 
    box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8); 
 

 
} 
 
input[type=radio]:checked + label:before { 
 
    content: "\2022"; 
 
    color: #f3f3f3; 
 
    font-size: 30px; 
 
    text-align: center; 
 
    line-height: 18px; 
 
}

<label for="female"><input id="female" type="radio" name="gender" value="female">Female</label>

來源

2016-08-28 Tony

你必須有你輸入的內部替代，因爲+只選擇在同一水平上的下一個元素。

input{ 
 
    display:none; 
 
} 
 

 

 
span:before { 
 
    content: ""; 
 
    display: inline-block; 
 
    width: 16px; 
 
    height: 16px; 
 
    margin-right: 10px; 
 
    bottom: 1px; 
 
    background-color: #aaa; 
 
    box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8); 
 

 
} 
 
input[type=radio]:checked + span:before { 
 
    content: "\2022"; 
 
    color: #f3f3f3; 
 
    font-size: 30px; 
 
    text-align: center; 
 
    line-height: 18px; 
 
}

<label for="female"> 
 
    <input id="female" type="radio" name="gender" value="female"> 
 
    <span for="female"></span> 
 
    Female 
 
</label

來源

2016-08-28 18:29:56

反正是有改變的CSS與當前的HTML代碼工作？由於我無法添加span標籤。：/ – Tony

好的。我用Jquery添加了一個span標籤。現在它正在工作。非常感謝 – Tony

嗨！如果在輸入和跨度之間存在標記，則它不起作用。你對這種情況有什麼建議嗎？ – Tony

請儘量把你的標籤後input:radio

<input id="female" type="radio" name="gender" value="female"> 
<label for="female"> Female.</label>

來源

2016-08-28 18:34:10 Manivannan

Thanks.I輸入後無法貼標籤：收音機，但問題解決了。 :) – Tony

.control{ 
 
    vertical-align: middle; 
 
    display: inline-block; 
 
} 
 
input{ 
 
    margin-right: 10px; 
 
} 
 
input:before { 
 
    content: ""; 
 
    display: inline-block; 
 
    width: 16px; 
 
    height: 16px; 
 
    margin-left: -1px; 
 
    background-color: #aaa; 
 
    box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8); 
 
} 
 

 
input[type=radio]:checked:before { 
 
    content: "\2022"; 
 
    color: #f3f3f3; 
 
    font-size: 30px; 
 
    text-align: center; 
 
    line-height: 18px; 
 
}

<input id="female" class="control" type="radio" name="gender" value="female"> 
 
<label for="female" class="control"> 
 
Female</label>

來源

2016-08-28 18:56:01 Trix

標籤輸入類型無線電

回答

相關問題