radiobutton styling without label

Is it possible to style with css only, a radiobutton without having a label? Radiobuttons with label does seem to appear ok, but the ones not having a label, do not appear at all. Didn't find any proper solution through the internet for my problem. 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}`

---

The answer is "yes" and "no".

"Yes" you can style radio buttons like this FIDDLE. But they are boring and ugly.

CSS

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

The answer is "NO" if you want to make them pretty, and is answered HERE in an old discussion.

链接地址: http://www.djcxy.com/p/89158.html

上一篇: 将不同的颜色与不透明度组合以创建目标颜色

下一篇: 无标签单选按钮式样