如何在选中单选按钮后更改其颜色? 我正在使用此代码,但它对我不起作用。
<div class="container3">
<label class="columnName" style="margin-bottom:7px">Analytics</label><span style="color: red !important; display: inline; float: none;"> *</span><br></br>
<label class="btn-primary">
<input type="radio" name="first" id="radio1" value="SQL" style="margin-left: 10px"></input><span style="margin-left:20px">SQL </span>
</label><br></br>
<label class="btn-primary">
<input type="radio" name="first" id="radio2" value="Python" style="margin-left: 10px"></input><span style="margin-left:20px">Python </span>
</label>
</div>
我的 CSS 代码是:
.container3 input[type="radio"]:checked
{
background-color: #ff0000;
}
但这对我不起作用。 有人可以帮助我在不实现自定义图像或使用自定义 Javascript 库的情况下解决这个问题吗?谢谢
答案 0 :(得分:-1)
你想要这样的东西吗?
public class SomeDbContext : AbpZeroDbContext<Tenant, Role, User>
{
public SomebContext()
: base("Default")
{
}
public SomeDbContext(string nameOrConnectionString)
: base(nameOrConnectionString)
{
((IObjectContextAdapter)this).ObjectContext.CommandTimeout = 180000;
}
}
/* The container */
.container {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default radio button */
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
}
/* Create a custom radio button */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
border-radius: 50%;
}
/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
background-color: #ccc;
}
/* When the radio button is checked, add a blue background */
/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
.container input:checked ~ .checkmark {
background-color: #ff9999;
}
/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:after {
display: block;
background: #ff9999;
}
/* Style the indicator (dot/circle) */
.container .checkmark:after {
top: 9px;
left: 9px;
width: 8px;
height: 8px;
border-radius: 50%;
background: white;
}