纯 CSS 自定义单选按钮（全宽）[关闭]答案

【问题标题】：Pure CSS custom radio button (whole width) [closed]纯 CSS 自定义单选按钮（全宽）[关闭]
【发布时间】：2016-10-25 00:22:13
【问题描述】：

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

左：选中/右：未选中

我知道如何替换复选框中的单选圆点或勾号 - 互联网上有很多关于此的教程 - 但我找不到让矩形像这样位于标签文本后面的方法（矩形为输入大小的 100%，并且在其周围不留额外的空格）。

应考虑与旧浏览器 (IE8) 的兼容性。

这是我的 html（我正在使用引导程序）：

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

【问题讨论】：

希望您至少尝试自己编写代码。 Stack Overflow 不是代码编写服务。我建议你做一些additional research，无论是通过谷歌还是通过搜索，尝试一下。如果您仍然遇到问题，请返回您的代码并解释您尝试过的操作。
我同意上述评论。你甚至都没有尝试过，这就像你试图在不付钱的情况下让别人完成你的工作。
感谢@Paulie_D 的建议，但我已经尝试了几种方法，我能得到的最好结果是标签文本无响应： - 在窗口的水平调整大小时，我的文本没有修改它与矩形的宽度一起填充 - 在这种情况下，我使用百分比填充；或其他方法： - 我的矩形位于标签文本的前面，因此只有矩形的白色背景可见
感谢 Quiet Tran 的回答，我意识到自己做错了什么。我们现在可以冷静下来了。谢谢大家！

标签： html css

【解决方案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/

希望能帮到你

【讨论】：

【解决方案2】：

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

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

}

使用 !important 很重要，因为这样可以覆盖引导程序样式

【讨论】：