Question

如何在选中单选按钮后更改其颜色？我正在使用此代码，但它对我不起作用。

    <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 库的情况下解决这个问题吗？谢谢

Answer 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;
}

检查如何更改单选按钮的颜色？

1 个答案: