无标签的radiobutton造型

Question

是否可以仅使用css样式，没有标签的单选按钮？带标签的Radiobuttons看起来似乎没问题，但没有标签的Radiobuttons根本没有出现。没有通过互联网找到任何适当的解决方案来解决我的问题。

http://codepen.io/anon/pen/iJjru/

input.form-radio:empty{
  margin-left: -9999px}

input.form-radio:empty ~ .description {
  position: relative;
  float: left
  text-indent: 30px
  margin-top: 0 }


input.form-radio:empty ~ .description:before {
  position: absolute
  display: block
  top: 3px
  bottom: 0
  left: 0
  content: ''
  width: 10px
  height: 10px
  background: #fff
  border-radius: 30px
  border: 2px solid #fdd68d }

input.form-radio:hover:not(:checked) ~ .description.option:before {
  text-indent: .9em
  color: #C2C2C2
  background-color: orange }

input.form-radio:hover:not(:checked) ~ .description {
  color: #888 }

input.form-radio:checked ~ .description:before {
  text-indent: .9em
  background-color: orange }

input.form-radio:checked ~ .description {
  color: #777}

Answer 1

答案是“是”和“否”。

“是”你可以设置像FIDDLE这样的单选按钮。 但它们很无聊和丑陋。

CSS

.radiotest {
    background-color: red;
    border: 2px solid green;
    width: 20px;
    height: 20px;
    margin: 20px;
}

如果你想让它们漂亮，答案是“不”，并在旧的讨论中回答HERE。