0

我正在尝试将此 CSS应用于我的复选框，但似乎其他一些 CSS 正在阻止它。

我如何确定其他 CSS 可能会干扰它，或者为什么它不将该样式应用于我的复选框？

这是我的 CSS 和 HTML 的现场演示

我只将它应用于最后一组复选框，我可以看到check效果，但框本身并没有出现，甚至设置为非的旧框仍然出现。

4

5 回答 5

1

例如，您可以使用 firebug 或 chrome 开发人员工具轻松找出您的代码有什么问题。您原来的复选框没有被隐藏的原因是第425 行的 css中的display: inline-block'设置。#docContainer .fb-checkbox input

于 2013-07-25T20:05:00.457 回答
1

我查看了您的样式表，但看不到您已为input复选框设置样式。我通过小提琴运行它，它工作正常

演示http://jsfiddle.net/kevinPHPkevin/eB4zz/

已编辑

您的样式正在被覆盖。我!important在每个值旁边设置了测试目的，然后它就可以正常工作了。

在此处输入图像描述

于 2013-07-25T20:16:50.987 回答
1

它被覆盖，因为

#docContainer .fb-checkbox input

比您的风格声明更具体：

.regular-checkbox

将您的样式声明更改为

#docContainer .fb-checkbox input.regular-checkbox

并且它将优先于以前的样式。

于 2013-07-29T12:34:17.157 回答
0

您display: none会被其他选择器覆盖（请参阅帕特里克的回答）。在 Firebug 中它被划掉了，这意味着它没有被您的浏览器解释。

萤火虫 http://imageshack.us/scaled/landing/856/ldk8.png

我建议您安装 Firebug for Firefox 或使用浏览器提供的开发人员工具。它们将向您展示浏览器实际呈现的样式。

于 2013-07-25T20:12:41.357 回答
0

试试这个代码

input[type="checkbox"] { 
    -moz-appearance: checkbox; -webkit-appearance: checkbox;
    margin-left:3px; border:0; 
    vertical-align: middle;    
    top: -1px;bottom: 1px;
    *overflow: hidden;
    box-sizing: border-box; /* 1 */  
    *height: 13px; /* Removes excess padding in IE 7 */
    *width: 13px;
    backgorund: #ffffff; }
于 2013-11-20T10:09:38.623 回答