Question

仅使用css设置复选框样式。复选框定义使用速记定义而不是span和label来定义文本。

＆＃13;

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

＆＃13;

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

＆＃13;

当用户将鼠标悬停在复选框上时，我希望看到蓝色边框。我的问题的不同之处在于它使用了简写符号。没有明确的标签或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_wrapper类来设计整个事物。

仅使用css设置复选框样式

1 个答案: