是否可以使用没有标签的纯css单选按钮输入进行自定义？

Question

<input id="whateveryoulike" class="whateveryoulike" name="test" type="radio" checked="checked">
<input id="whateveryoulike2" class="whateveryoulike2" name="test2" type="radio">

这是否可以自定义这两个元素而不是针对每个元素的标签并仅使用css（使用html和imgs）？

Answer 1

你可以这样设计：

input[type='radio'] {
  background: none;
  opacity: 0;
}
.checkbox_outer {
  position: relative;
  float: left;
  margin-right: 5px;
}
input[type='radio'] + span {
  position: absolute; top:0; left:0; right:0; bottom:0; background-image: url('http://s28.postimg.org/oggskkn6x/controls.png'); background-repeat: no-repeat;}
  input[type='radio'], .checkbox_outer {
    height: 16px;
    width: 16px;
    position: relative;
    z-index: 10;
  }
  /*Radiobutton*/
  input[type='radio']+span {
    background-position: -32px 0;
  }
  input[type='radio']:checked + span {
    background-position: -48px 0;
  }
  input[type='radio']:hover:checked + span,
  input[type='radio']:focus:checked + span {
    background-position: -48px -16px;
  }
  input[type='radio']:hover + span,
  input[type='radio']:focus + span {
    background-position: -32px -16px;
  }
  input[type='radio']:disabled + span {
    background-position: -32px -32px;
  }
  input[type='radio']:disabled:checked + span {
    background-position: -48px -32px;
  }
  input[type='radio']:hover:disabled + span,
  input[type='radio']:focus:disabled + span {
    background-position: -32px -32px;
  }
  input[type='radio']:hover:disabled:checked + span,
  input[type='radio']:focus:disabled:checked + span {
    background-position: -48px -32px;
  }
  input[type='radio']:active + span {
    background-position: -32px -48px;
  }
  input[type='radio']:active:checked + span {
    background-position: -48px -48px;
  }

<strong>Radio buttons </strong>
<br />
<div class="checkbox_outer">
  <input id="ID5" type="radio" name="NAME5" checked><span></span>
</div>Checked
<br />
<div class="checkbox_outer">
  <input id="ID5" type="radio" name="NAME5"><span></span>
</div>Not checked
<br />
<div class="checkbox_outer">
  <input id="ID6" type="radio" name="NAME6" checked disabled><span> </span>
</div>Checked & disabled
<br />
<div class="checkbox_outer">
  <input id="ID6" type="radio" name="NAME6" disabled><span></span>
</div>Not checked & disabled
<br />

使用标签，它使造型和＆amp;定制很容易。

check this

image for radio

custom radios

Answer 2

我尝试使用input[type=radio]::after，但它似乎无法运作。但这是一个适用于所有现代浏览器的漂亮小技巧：

在每个单选按钮后放一个<span>，之间没有空格。此跨度高于输入，但由于pointer-events: none，输入仍然可以点击（旧IE版本不支持此功能）。

现在您可以根据需要设置按钮的样式：

＆＃13;

＆＃13;

span.customRadio {
    display: none;
}

input[type="radio"] {
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: default;
}

input[type="radio"] + span.customRadio {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: white;
    margin: 0 0 0 -16px;
    border-radius: 50%;
    box-shadow: 0 0 3px -1px rgba(0, 0, 0, 0.8);
    pointer-events: none;
}
input[type="radio"] + span.customRadio::after {
    content: '.';
    color: transparent;
    position: absolute;
    display: block;
    width: 2px;
    height: 2px;
    margin: 7px 0 0 7px;
    opacity: 0.6;
    border-radius: 50%;
    transition: .2s;
}
input[type="radio"]:checked + span.customRadio::after {
    width: 10px;
    height: 10px;
    margin: 3px 0 0 3px;
    opacity: 1;
    background-color: #3388ff;
    box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
}

＆＃13;

<input name="test" type="radio" checked="checked"><span class="customRadio"></span>
<input name="test2" type="radio"><span class="customRadio"></span><br><br>

In action:<br>

<input name="test3" type="radio"><span class="customRadio"></span>

<input name="test3" type="radio"><span class="customRadio"></span>

<input name="test3" type="radio"><span class="customRadio"></span>

＆＃13;

＆＃13;

＆＃13;

<强> JSFiddle

Answer 3

尝试这个

input[type=radio]:not(old) {
width: 23px;
height: 23px;
display: inline-block;
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
appearance: none;
border-radius: 1em;
border: 2px solid #01a982;
outline: none !important;}

 input[type=radio]:not(old):checked{
background-image: radial-gradient(circle at center, #fff, #fff 37.5%, #01a982 40%, #01a982 100%);
outline: none;}