ASPが入力タグにスタイルを適用するために使用するスパンタグを考慮する方法は？

Question

は私がASPチェックボックスコントロールを使用していることから、

.yesNoBox { 
    display: none; 
} 

.yesNoBox + label { 
    border-radius: 10px; 
    display: inline-block; 
    padding: 2px 10px; 
    cursor: pointer; 
} 

.yesNoBox + label:after { 
    padding-left: 8px; 
    color: gray; 
    content: "NO"; 
    vertical-align: middle; 
} 

.yesNoBox:checked + label:after { 
    color: green; 
    content: "YES"; 
    font-weight: bold; 
} 

.yesNoBox + label > span { 
    height: 16px; 
    border-radius: 8px; 
    width: 16px; 
    background-color: lightgray; 
    display: inline-block; 
    vertical-align: middle; 
} 

.yesNoBox:checked + label > span { 
    background-color: green; 
} 

は、CSSが

<input id="General_Vehicles" name="General_Vehicles" type="checkbox"> 
<label for="General_Vehicles"><span></span></label> 

ただし、次のHTMLのために設計されて、次のCSSを使用してカスタムのチェックボックスを持っている、ASPコントロールは<input>をラップ私は、次の2つのフィドルはSHを設定している

<span class="yesNoBox"><input id="General_Vehicles" name="General_Vehicles" type="checkbox"></span> 
<label for="General_Vehicles"><span></span></label> 

：<span>に代わりに次のHTMLを与えますHTMLの各ブロックの動作を起因：

• How it should work
• How it behaves in ASP

は、どのように私はこの余分なスパンで私のASPページでの作業を取得することができますか？私は、JavaScriptソリューションまたはソリューションの背後にあるコードを望んでいません。

Answer 1

マークアップ自体を更新することができない場合は、これが完全にCSSを介してどのようになる可能性があるか完全にはわかりません。 adjecent要素が+または~事業者を経由してターゲットとすることができるように、あなたの:checked要素の親要素をターゲットに必要とされるであろう

CSS lacks any type of parental selector、。そのようなオペレータが存在しなかった場合、あなただけのような何か必要があります：

/* If your yesNobox is the parent of a :checked element, then target the next label */ 
.yesNoBox:has(:checked) + label:after { ... } 

をあなたは悲しげにJavaScriptベースのソリューションに頼るか、明示的にそうこれを達成するために、マークアップを編集する機能を持って、その必要があるだろうあなたが言いましたように、問題外です。