没有标签的单选按钮样式答案

【问题标题】：radiobutton styling without label没有标签的单选按钮样式
【发布时间】：2018-07-29 22:59:33
【问题描述】：

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

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}

【问题讨论】：

你想应用什么样的样式？
向我们展示您的尝试
一个说明问题的例子会有很大帮助
也许一些代码会有所帮助
我尝试用单选按钮包装的类更改标签，出现了复选框，但它们不可点击。

标签： html css

【解决方案1】：

答案是“是”和“否”。

“是的”，您可以设置像 FIDDLE 这样的单选按钮样式。但它们既无聊又丑陋。

CSS

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

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

【讨论】：