css 更改单选按钮的颜色

aamkag61 于 2023-05-08 发布在其他

关注(0)|答案(2)|浏览(173)

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

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

你能帮我吗？

css

来源：https://stackoverflow.com/questions/69363671/changing-color-of-radio-button

2条答案

按热度按时间

yyhrrdl81#

您可以使用新属性accent-color来设置输入的颜色。目前，浏览器支持仅限于Chrome和Firefox，因此您将为其他浏览器创建后备。

input {accent-color: black;}

input {
  accent-color: black;
}

<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>

赞(0）回复(0）举报 2023-05-08

eivgtgni2#

解决方法是使用css中的属性filter。

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>

赞(0）回复(0）举报 2023-05-08

我来回答

css 更改单选按钮的颜色

2条答案

相关问题

热门标签

最新问答