帶有關聯標籤控件的樣式單選按鈕

我想通過使用我將設計的相關標籤控件來製作自定義單選按鈕。我遇到的問題是在CSS中，我試圖在輸入[type = radio]在span元素內生成input [type = radio]之後向樣式添加樣式，我不知道如何樣式該標籤是輸入[type = radio]父元素（即跨度元素）的下一個元素。帶有關聯標籤控件的樣式單選按鈕

我應該怎麼辦？

<asp:RadioButton ID="radbtnContinue" CssClass="radBtnShoppingBag" runat="server" GroupName="radButton" Checked="True"/> 
<asp:Label runat="server" AssociatedControlID="radbtnContinue" CssClass="labelRadioGroup"></asp:Label> 

<asp:RadioButton ID="radbtnCollect" CssClass="radBtnShoppingBag" runat="server" GroupName="radButton" Checked="False" /> 
<asp:Label runat="server" AssociatedControlID="radbtnCollect" CssClass="labelRadioGroup"></asp:Label>

生成的代碼

<div id="radbtnContainer" style="float: left">  
    <span class="radBtnShoppingBag"> 
     <input id="ctl00_ctl00__nestedContent__mainpageContent_BasketViewProducts_radbtnContinue" type="radio" name="ctl00$ctl00$_nestedContent$_mainpageContent$BasketViewProducts$radButton" value="radbtnContinue" checked="checked"> 
    </span> 
    <label for="ctl00_ctl00__nestedContent__mainpageContent_BasketViewProducts_radbtnContinue" class="labelRadioGroup"></label> 

    <span class="radBtnShoppingBag"> 
     <input id="ctl00_ctl00__nestedContent__mainpageContent_BasketViewProducts_radbtnCollect" type="radio" name="ctl00$ctl00$_nestedContent$_mainpageContent$BasketViewProducts$radButton" value="radbtnCollect"> 
    </span> 
    <label for="ctl00_ctl00__nestedContent__mainpageContent_BasketViewProducts_radbtnCollect" class="labelRadioGroup"></label> 
</div>

CSS

.radBtnShoppingBag input[type=radio]{display:none;} 

#radbtnContainer label{ 
display: block; 
float: left; 
color: #000; 
cursor: pointer; 
} 

.radBtnShoppingBag input[type=radio] + label{ 
    //styles 
} 

.radBtnShoppingBag input[type=radio]:checked + label::before 
{ 
    //more styles 
}

望着生成的代碼，你看到的跨度內的輸入元素和CSS我期待對於下一個標籤元素是不正確的，因爲它不是在輸入元素之後，而是在該跨度之後。

我希望我已經明確了我遇到的問題，並將不勝感激任何幫助。

這就是我想要實現的。

來源

2015-11-12 Colin Roe

你並不需要在你的兄弟選擇輸入，標籤radBtnShoppingBag的，像這樣的兄弟姐妹：'''.radBtnShoppingBag + label {...}''' – ArleyM

你正在嘗試的問候實現更新到收音機時檢查標籤是不可能單獨使用CSS。你將不得不使用JavaScript/jQuery解決方案。

I've created an example here where I toggle a class to the corresponding checked label

這是非常具體到您的HTML結構

//jQuery 
$('input[type=radio]:checked') 
.parent('span.radBtnShoppingBag') 
.next('label.labelRadioGroup') 
.addClass('is-checked'); 

$('input[type=radio]').change(function() { 
    $('label.labelRadioGroup').removeClass('is-checked'); 
    $('input[type=radio]:checked') 
     .parent('span.radBtnShoppingBag') 
     .next('label.labelRadioGroup') 
     .addClass('is-checked'); 
}); 

//CSS 
#radbtnContainer .radBtnShoppingBag + label { 
    color:red; 
} 
#radbtnContainer label.is-checked { 
    color:blue; 
}

來源

2015-11-12 22:42:38 partypete25

帶有關聯標籤控件的樣式單選按鈕

回答

相關問題