我设法使用标准 HTML 表单达到了预期的结果，但是当我开始修改布局以改为使用 ASP.NET Web 控件时……我似乎无法获得相同的效果。我使用的原始 CSS/HTML 如下:
<html>
<head>
<style>
div.sqgrp1 {
position: absolute;
top: 123px;
height: 40px;
width: 40px;
border-style: solid;
border-width: 1px;
border-color: #178e62;
background-color: #6ec3a1;
padding-left:0px;
padding-top:0px;
padding-bottom:0px;
padding-right:0px;
border-radius:10px;
}
input[type="radio"] {
display: none;
}
input[type="radio"] + label span {
display: inline-block;
width: 40px;
height: 40px;
margin: 0px 0px 0px 0px;
vertical-align: middle;
cursor: pointer;
border-radius:10px;
background-color:red;
background-size:0px;
background:black;
opacity:0;
}
input[type="radio"]:checked + label span {
opacity: 0.6;
}
</style>
</head>
<body><form id="phq9" name="phq9" action="process.aspx" method="post" runat="server">
<div class="sqgrp1" style="left: 660px;">
<input type="radio"id="Q1A1" value="1" name="Q1" /><label for="Q1A1" ><span></span></label>
</div>
<div class="sqgrp1" style="left: 730px;">
<input type="radio"id="Q1A2" value="2" name="Q1" /><label for="Q1A2"><span></span></label>
</div>
<div class="sqgrp1" style="left: 800px;">
<input type="radio"id="Q1A3" value="3" name="Q1" /><label for="Q1A3"><span></span></label>
</div>
<div class="sqgrp1" style="left: 870px;">
<input type="radio"id="Q1A4" value="4" name="Q1" /><label for="Q1A4"><span></span></label>
</div>
</form>
</body>
</html>
我尝试了几种方法来使 ASP.NET 控件产生相同的效果，但没有一种方法有效，所以我又回到了常规的 HTML 控件。
最佳答案
解决了我遇到的问题。将所有控件设置为 asp 很好，但制作标签 asp:label 会导致 CSS 出错。通过将 label 标签保留为普通 html，CSS 的工作方式完全相同，即使单选按钮为 <asp:radiobutton runat="server">。 .
关于html - 使用 CSS 在 ASP.NET 单选按钮中动态更改颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24740541/