所有浏览器都不支持自定义复选框和单选按钮

Question

我使用自定义复选框和单选按钮为我的项目使用：before和：after，但这仅适用于＆＃34; Google Chrome＆＃34;并且在其他浏览器中不受支持，任何技巧都是在所有浏览器中看起来相同的原因，我不想在复选框或单选按钮后使用标签。

CSS就在这里：

FIDDLE（例如）

我的实际单选按钮如下所示：

Google Chrome：

火狐：

IE：

Answer 1

像:before和:after这样的伪元素会在元素内容之前和之后添加内容。复选框和单选按钮没有内容，因此它们不支持伪元素之前和之后。 Chrome是“特殊的”，但正常的行为是来自FF和IE的行为。

此外，复选框和广播是浏览器默认元素。它们很难改变而且不应该改变。

虽然你说你不想添加标签，但这是要走的路。添加绝对位置，将其放在radiobutton /复选框的顶部，如下例所示

body {
  padding: 50px;
}

input[type='radio'] {
  margin: 0;
  height: 13px;
  width: 13px;
  margin-top: 2px;
  position: relative;
}

div.wrapper {
  position: relative;
}

input[type='radio'] + label {
  content: '';
  display: inline-block;
  width: 13px;
  height: 13px;
  border: none;
  position: absolute;
  left: 0;
  top: 1px;
  background: gray url("../images/i-radio-empty.png") no-repeat 0 0;
}

input[type='radio']:checked + label {
  width: 13px;
  height: 13px;
  background: red url("../images/i-radio-checked.png") no-repeat 0 0;
}

<div class="wrapper">
  <input type="radio" name="gender" value="male" id="male"> Male
  <label for="male"></label>
</div>

<div class="wrapper">
  <input type="radio" name="gender" value="female" id="female"> Female
  <label for="female"></label>
</div>

<div class="wrapper">
  <input type="radio" name="gender" value="other" id="other"> Other
  <label for="other"></label>
</div>

Answer 2

Mihai T的解决方案还不错，但是在点击文本时不选中复选框确实很麻烦。我个人讨厌它：）

虽然radio和chekbox确实不支持伪元素:before和:after，但label却支持伪元素。因此，您可以使用带有文本的普通标签和带有:before的伪元素position: absolute。

div.wrapper {
  position: relative;
  display: inline-block;
  margin-right: 10px;
}
input[type='radio'] {
  display: none;
}
input[type='radio'] + label {
  padding-left: 20px;
}
input[type='radio'] + label:before {
  content: '';
  width: 13px;
  height: 13px;
  position: absolute;
  left: 0;
  top: 1px;
  background: #FFF;
  border: 1px solid #999;
  border-radius: 50%;
  cursor: pointer;
  box-sizing: border-box;
}
input[type='radio']:checked + label:before {
  background: #000;
  border: 4px solid #F9CC55;
}

<div class="wrapper">
  <input type="radio" name="gender" value="male" id="male">
  <label for="male">Create Tabs Group</label>
</div>

<div class="wrapper">
  <input type="radio" name="gender" value="female" id="female">
  <label for="female">Update Existing Tabs Group</label>
</div>