时间戳

首页 > 解决方案 > 更改单选按钮的颜色

css - 更改单选按钮的颜色

问题描述

在radio buttonn的默认CSS代码中，未选中时为灰色，选中时为蓝色：

在此处输入图像描述

然而，我需要它在两个州都是黑色的。因此，我为单选按钮覆盖了 SCSS。这是我的代码：

HTML：

     <div class="col-md-2 col-sm-6">                
        <div class="row">
          <div class="col-md-12">
            <label>Earlier experience in this field?</label>
          </div>
        </div>
        <div class="row">
          <div class="col-md-6">
            <div class="radio">
              <label><input type="radio" formControlName="earlierExperience" value="1">Yes</label>
            </div>
          </div>
          <div class="col-md-6">
            <div class="radio">
              <label><input type="radio" formControlName="earlierExperience" value="0">No</label>
            </div>
          </div>
        </div>
      </div>

CSS：

input[type='radio']:after {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  top: -2px;
  left: -1px;
  position: relative;
  background-color:white;
  display: inline-block;
  visibility: visible;
  border: 1px solid black;
}

input[type='radio']:checked:after {
  border: 4.5px solid black;  
}

这段代码的问题是选中按钮中间的小圆圈不再显示：

在此处输入图像描述

你能帮我解决这个问题吗？

标签： csssassradio-button

解决方案

对于解决方案，您可以在 css中使用属性过滤器。

input[type='radio'] {
  filter: grayscale(100%) contrast(200%);
}


input[type='radio'] {
  filter: grayscale(100%) contrast(200%);
}
<div class="col-md-2 col-sm-6">
  <div class="row">
    <div class="col-md-12">
      <label>Earlier experience in this field?</label>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6">
      <div class="radio">
        <label>
              <input
                type="radio"
                formControlName="earlierExperience"
                value="1"
              />Yes
            </label>
      </div>
    </div>
    <div class="col-md-6">
      <div class="radio">
        <label>
              <input
                type="radio"
                formControlName="earlierExperience"
                value="0"
              />No
            </label>
      </div>
    </div>
  </div>
</div>

具有box-shadow、伪元素和input绑定的自定义解决方案label

.radio {
  margin-left: 0.125em;
}

.radio label {
  position: relative;
  padding-left: 1.5em;
  cursor: pointer;
}

.radio label::after {
  content: '';
  width: 1em;
  height: 1em;
  position: absolute;
  top: 0;
  left: 0.25em;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px black;
}

input[type='radio'] {
  position: absolute;
  visibility: hidden;
}

input[type='radio']:checked~label::after {
  box-shadow: inset 0 0 0 2px black, inset 0 0 0 4px white, inset 0 0 0 10px rgb(0, 0, 0);
}
<div class="col-md-2 col-sm-6">
  <div class="row">
    <div class="col-md-12">
      <label>Earlier experience in this field?</label>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6">
      <div class="radio">
        <input id="yes" type="radio" name="radio" formControlName="earlierExperience" value="1" />
        <label for="yes"> Yes </label>
      </div>
    </div>
    <div class="col-md-6">
      <div class="radio">
        <input id="no" type="radio" name="radio" formControlName="earlierExperience" value="0" />
        <label for="no"> No </label>
      </div>
    </div>
  </div>
</div>

推荐阅读