Question

我已多次尝试自定义下面的radioboxes样式，但我失败了，我的HTML和CSS代码包含在下面。注意：我尝试在此行中使用+而不是~：

.accountcolormaindiv input[type=radio]:checked ~ .accountcolormaindiv label:before {

但问题仍然存在！

.accountcolormaindiv input[type=radio] {
  display: none;
}

.accountcolormaindiv label {
  width: 25px;
  height: 25px;
  display: inline-block;
  margin-bottom: -10px;
  border-radius: 200px;
  cursor: pointer;
  border: 2px solid gray;
  color: #FFF;
  position: relative;
}

.accountcolormaindiv input[type=radio]:checked~.accountcolormaindiv label:before {
  content: "✔";
  position: absolute;
  color: #FFF;
  left: 50%;
  top: 51%;
  transform: translate(-50%, -44%);
}

<div class="accountcolormaindiv">
  <input type="radio" checked name="accountcolor" id="onecheckbox" value="one">
  <input type="radio" name="accountcolor" id="twocheckbox" value="two">
  <label for="onecheckbox" class="onecheckboxtwo checkboxtwo"></label>
  <label for="twocheckbox" class="twocheckboxtwo checkboxtwo"></label>
</div>

谢谢^ _ ^

Answer 1

您的选择器错误且颜色为：在内容与背景相同之前。查看我在此笔上所做的更改：CodePen

.accountcolormaindiv input[type=radio] {
    display: none;
}

.accountcolormaindiv label {
    width: 25px;
    height: 25px;
    display: inline-block;
    margin-bottom: -10px;
    border-radius: 200px;
    cursor: pointer;
    border: 2px solid gray;
    color: #FFF;
    position: relative;
}

.accountcolormaindiv input[type=radio]:checked + label:before {
    content: "✔";
    position: absolute;
    color: black;
    left: 50%;
    top: 51%;
    transform: translate(-50% , -44%);
}

我还更新了HTML结构，以便css相邻选择器匹配它旁边的标签

<div class="accountcolormaindiv">
    <input type="radio" name="accountcolor" value="one">
    <label for="onecheckbox" class="onecheckboxtwo checkboxtwo"></label>
    <input type="radio" checked="checked" name="accountcolor" value="two">
    <label for="twocheckbox" class="twocheckboxtwo checkboxtwo"></label>
</div>

：选中的选择器不能使用输入[type = radio]

1 个答案: