Question

我想设置单选按钮的样式，一次只能选择一个，但是以某种方式不起作用。

客户样式正在显示，但是选中的样式不起作用。缺少什么了吗？

请帮助。

下面是我的HTML

<div class="radio-button pull-right">
  <span>
    Yes
    <input type="radio" name="name" id="Yes" value="Yes" class="mr10">
    <div class="radio-style"></div>
  </span>
  <span>
    No
    <input type="radio" name="name" id="No" value="No" class="mr10">
    <div class="radio-style"></div>
  </span>
</div>

下面是我的CSS

body {
  background: black
}

.radio-button {
  position: relative;
}
span {
  position: relative;
  width: 60px;
  display: inline-flex;
  color: white
}
input {
  width: auto;
  position: absolute;
  z-index: -1;
  opacity: 0;
}
 input:checked .radio-style:before {
    display: block;
 }

.radio-style {
  border: 1px solid white;
  border-radius: 50%;
  position: absolute;
  top: 2px;
  right: 0;
  height: 20px;
  width: 20px;
  background: transparent;
  cursor: pointer;
}
.radio-style:before {
  content: "";
  left: 7px;
  top: 7px;
  height: 6px;
  width: 6px;
  border-radius: 50%;
  background: green;
  position: absolute;
  display: none;
}

Answer 1

我用标签替换了您的跨度，并用input:checked .radio-style:before更改了input:checked+.radio-style:before。这是选择选中输入之后的.radio-style:before。

body {
  background: black
}

.radio-button {
  position: relative;
}
label {
  position: relative;
  width: 60px;
  display: inline-flex;
  color: white
}
input {
  width: auto;
  position: absolute;
  z-index: -1;
  opacity: 0
}
 input:checked+.radio-style:before {
    display: block;
 }

.radio-style {
  border: 1px solid white;
  border-radius: 50%;
  position: absolute;
  top: 2px;
  right: 0;
  height: 20px;
  width: 20px;
  background: transparent;
  cursor: pointer;
}
.radio-style:before {
  content: "";
  left: 7px;
  top: 7px;
  height: 6px;
  width: 6px;
  border-radius: 50%;
  background: green;
  position: absolute;
  display: none;
}

<div class="radio-button pull-right">
  <label> 
    Yes
    <input type="radio" name="name" id="Yes" value="Yes" class="mr10">
    <div class="radio-style"></div>
  </label>
  <label>
    No
    <input type="radio" name="name" id="No" value="No" class="mr10">
    <div class="radio-style"></div>
  </label>
</div>

单选按钮客户风格

1 个答案: