仅使用 css 设置复选框样式

Question

仅使用 css 设置复选框样式。复选框定义使用 shorthand 定义而不是跨度和标签来定义文本。

input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    cursor:pointer;
}

Hello world!<input name="status" id="status" type="checkbox" />

我希望在用户将鼠标悬停在复选框上时看到蓝色边框。我的问题的不同之处在于它使用速记符号。没有您可以操纵以获得特定效果的显式标签或 span 元素。

Answer 1

当涉及到复选框本身的样式时，您可以使用以下 CSS（适用于 Firefox 和 Safari/Chrome）取消设置标准输入元素的外观，然后自己设计它们（比较 http://www.w3schools.com/cssref/css3_pr_appearance.asp):

input[type="checkbox"] {    
-moz-appearance:none; /* Firefox */
-webkit-appearance:none; /* Safari and Chrome */
... [your definitions]
}

正如@sodawillow 指出的那样，如果没有包装元素，复选框及其旁边文本的样式将无法使用。您可以使用 jQuery 在每个复选框及其前面的文本周围生成一个环绕元素：

$('input[type="checkbox"]').each(function{
 $(this, this.prev()).wrapAll('<li class="checkbox_wrapper"></li>');
});
$('li.checkbox_wrapper').wrapAll('<ul></ul>');

然后就可以使用checkbox_wrapperclass来设计整个东西了。

仅使用 css 设置复选框样式

Styling a checkbox with css only

html

css

checkbox

hover