Question

我已经在这里看过如何设置输入按钮的样式我找到了一些很好的答案但是出于某种原因我在检查时无法设置按钮内部的样式。看看我的代码也许我做错了

.radio input[type='radio'] {
  display: none; /*removes original button*/
 }
    
.radio label:before { /*styles outer circle*/
    content: " ";
    display: inline-block;
    position: relative;
    top: 5px;
    margin: 0 5px 0 0;
    width: 20px;
    height: 20px;
    border-radius: 11px;
    border: 2px solid orange;
    background-color: transparent;
}

.radio label input[type='radio']:checked + label:after { /*styles inside circle*/
    border-radius: 11px;
    width: 12px;
    height: 12px;
    position: absolute;
    top: 9px;
    left: 10px;
    content: " ";
    display: block;
    background-color: blue;
}

<div class="radio">
  <label><input type="radio" name="gender" value="male"> Male</label>
  <label><input type="radio" name="gender" value="female"> Female</label>
  <label><input type="radio" name="gender" value="other"> Other</label>
 </div>

Answer 1

你不能在css中倒退，这就是为什么你的代码不起作用

您需要在span之后的label内添加input，并在收到广播后对其进行设置

请参阅代码段：

.radio input[type='radio'] {
  display: none;
  /*removes original button*/
}

.radio label:before {
  /*styles outer circle*/
  content: " ";
  display: inline-block;
  position: relative;
  top: 5px;
  margin: 0 5px 0 0;
  width: 20px;
  height: 20px;
  border-radius: 11px;
  border: 2px solid orange;
  background-color: transparent;
}

.radio label {
  position: relative;
}

.radio label input[type='radio']:checked+span {
  /*styles inside circle*/
  border-radius: 11px;
  width: 12px;
  height: 12px;
  position: absolute;
  top: 1px;
  left: 6px;
  display: block;
  background-color: blue;
}

<div class="radio">
  <label><input type="radio" name="gender" value="male"> Male<span></span></label>
  <label><input type="radio" name="gender" value="female"> Female<span></span></label>
  <label><input type="radio" name="gender" value="other"> Other<span></span></label>
</div>

Answer 2

请参阅下文。

我已将标签放在输入字段后面并重新定义标签的CSS：在选中按钮之前。您将输入字段作为标签的子项，但在CSS中它被视为兄弟。

＆＃13;

input[type='radio'] {
  display: none;
}

label:before {
  content: " ";
  display: inline-block;
  position: relative;
  top: 5px;
  margin: 0 5px 0 0;
  width: 20px;
  height: 20px;
  border-radius: 11px;
  border: 2px solid orange;
  background-color: transparent;
}

input[type='radio']:checked+label:before {
  position: relative;
  border: 2px solid orange;
  border-radius: 11px;
  width: 20px;
  height: 20px;
  top: 5px;
  content: " ";
  display: inline-block;
  background-color: blue;
}

＆＃13;

<div class="radio">
  <input id="male" type="radio" name="gender" value="male">
  <label for="male">Male</label>
  <input id="female" type="radio" name="gender" value="female">
  <label for="female">Female</label>
  <input id="other" type="radio" name="gender" value="other">
  <label for="other">Other</label>
</div>

＆＃13;

Answer 3

所以你的选择器不正确，你的html结构也是如此。您需要在输入后移动标签（并使用标签上的for属性和输入中的id定位输入），然后从选择器中删除第一个标签

我已经评论过我在下面更改的CSS

.radio input[type='radio'] { display: none; /*removes original button*/ } .radio label { /* add this so dot is relative to the label */ position: relative; display: inline-block; } .radio label:before { /*styles outer circle*/ content: " "; display: inline-block; top: 5px; margin: 0 5px 0 0; width: 20px; height: 20px; border-radius: 11px; border: 2px solid orange; background-color: transparent; vertical-align:middle; /* add this so text is vertically centred next to ring */ } /* remove the first label from this selector */ .radio input[type='radio']:checked + label:after { /*styles inside circle*/ border-radius: 50%; width: 12px; height: 12px; position: absolute; top: 6px; /* I have changed the top and left so this is in the centre */ left: 6px; content: " "; display: block; background-color: blue; }

<div class="radio"> <input type="radio" name="gender" value="male" id="male"><label for="male">Male</label> <input type="radio" name="gender" value="female" id="female"><label for="female"> Female</label> <input type="radio" name="gender" value="other" id="other"><label for="other"> Other</label> </div>

样式输入单选按钮

3 个答案: