沒有標簽的單選按鈕樣式

Question

是否可以僅使用 css 樣式，一個沒有標簽的單選按鈕？ 帶有標簽的單選按鈕看起來確實不錯，但沒有標簽的單選按鈕根本不出現。 沒有通過互聯網為我的問題找到任何合適的解決方案。

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

答案是“否”，如果你想讓他們漂亮，並且被回答這里在一個古老的討論。