Question

由于我的收音机和复选框输入的方式是用html构建的，我似乎无法找到一种方法来为它们提供非常简单的自定义样式。

Click here for the JSFiddle 任何人都可以请教我吗？如何为我的收音机和复选框提供自定义纯CSS样式？经过一些研究后，我注意到我可以使用http://www.csscheckbox.com/，但我不想使用图像。

我的输入结构如何？输入只是带有标签的包装。示例：<label><input name="checkbox" type="checkbox" value="OptionB" class="required">OptionB</label>

Answer 1

请在这里查看：http://webdesign.tutsplus.com/articles/quick-tip-easy-css3-checkboxes-and-radio-buttons--webdesign-8953

这应该有所帮助：

input[type="checkbox"] {
    display:none;
}
input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    background: green;
    border-radius: 10px;
    cursor:pointer;
}
input[type="checkbox"]:checked + label span {
    background: blue;
}

HTML

<input type="checkbox" id="c1" name="cc" />
<label for="c1"><span></span>Check Box 1</label>

如果你想要一个内边框或外边框，你可以使用:before或之后创建一个额外的元素来创建边框。

用于收音机和复选框输入的纯CSS

1 个答案: