纯CSS自定义单选按钮（整个宽度）

Question

我希望仅使用CSS设置这样的单选按钮（无背景图像）：

左：选中/右：未选中

我知道如何从复选框中替换无线电点或刻度线 - 互联网上有很多关于此的教程 - 但是我找不到一种方法让矩形位于标签文本后面，就像这样（矩形为输入的100％大小＆amp;并且不会留下额外的空白区域。）

应考虑与旧浏览器（IE8）的兼容性。

这是我的HTML（我使用bootstrap）：

<div class="col-xs-6 col-sm-6">
  <input type="radio" id="gender_woman" name="gender" value="madame" checked>
  <label for="connexion_madame">MADAME</label>
</div>
<div class="col-xs-6 col-sm-6">
  <input type="radio" id="gender_man" name="gender" value="monsieur">
  <label for="connexion_monsieur">MONSIEUR</label>
</div>

Answer 1

（我不使用引导程序）

<强> HTML

<label class="radio">
  <input type="radio" name="gender" value="MADAME">
  <span>MADAME</span>
</label>
<label class="radio">
  <input type="radio" name="gender" value="MONSIEUR">
  <span>MONSIEUR</span>
</label>

<强> CSS

label.radio {
  cursor: pointer;
}
label.radio input {
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
  pointer-events: none;
}
label.radio span {
  padding: 7px 14px;
  border: 2px solid #EEE;
  display: inline-block;
  color: #009BA2;
  border-radius: 3px;
  text-transform: uppercase;
}
label.radio input:checked + span {
  border-color: #009BA2;
}

链接JSFiddle：https://jsfiddle.net/edbmwz0c/

希望可以帮到你

Answer 2

我认为你可以像按钮一样设置样式，所以我认为这应该可以解决问题

 .checkbox{
    //other stuff
    background-color: #ffffff !important;

}

使用！important beacuse非常重要，因为你覆盖了bootstraps样式