如何计算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用于将样式应用于输入标记？

回答

相关问题