如何計算span標記ASP用於將樣式應用於輸入標記？

我使用下面的CSS如何計算span標記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爲以下HTML設計

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

但是有一個自定義的複選框，因爲我使用的ASP CheckBox控件，ASP的控制包裹<input>在<span>給下面的HTML代替：

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

我有以下兩種小提琴成立SH由於該行爲對HTML的每個塊：

我怎樣才能得到這個我的ASP頁面上的工作與額外的跨度？我不想要JavaScript解決方案或解決方案後面的代碼。

來源

2016-04-28 ChrisStillwell

我不完全確定這可能僅僅通過CSS，因爲它缺少任何類型的父選擇器，爲了從包含checked元素的「yesNoBox」中選擇相鄰元素，您將需要這些選擇器。你有沒有什麼能力來調整你的標記（即使用''而不是''？） –

拍攝這就是我所害怕的。不幸的是，我無法修改標記。 – ChrisStillwell

如果你不能更新標記本身，那麼我不完全確定這將是純粹通過CSS的可能性。

CSS lacks any type of parental selector，這將需要您:checked元素的父元素的目標，以便adjecent元素可以通過+或~運營商的目標。如果一個這樣的運營商確實存在，你只需要像：

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

你會黯然需要求助於一個基於JavaScript的解決辦法還是得爲了明確編輯標記的能力，有可能做到這一點，這正如你所提到的，似乎沒有問題。

來源

2016-04-28 20:43:49

如何計算span標記ASP用於將樣式應用於輸入標記？

回答

相關問題