我正在尝试使用以下方式设置复选框的样式:
<input type="checkbox" style="border:2px dotted #00f;display:block;background:#ff0000;" />但风格并未适用.该复选框仍显示其默认样式.我如何给它指定的样式？
我在表格中有一个复选框列表.(行中的一些CB)
<tr><td><input type="checkbox" class="custom_image" value="1" id="CB1" /><label for='CB1'> </label></td></tr>
<tr><td><input type="checkbox" class="custom_image" value="2" id="CB2" /><label for='CB2'> </label></td></tr>
<tr><td><input type="checkbox" class="custom_image" value="3" id="CB3" /><label for='CB3'> </label></td></tr>
<tr><td><input type="checkbox" class="custom_image" value="4" id="CB4" /><label for='CB4'> </label></td></tr>
我想用一对自定义的开/关图像替换复选框图像,我想知道是否有人更好地理解如何使用CSS执行此操作？
我找到了这个"CSS忍者"教程,但我不得不承认我觉得它有点复杂. http://www.thecssninja.com/css/custom-inputs-using-css
据我所知,你被允许使用伪类
td:not(#foo) > input[type=checkbox] + label
{
background: url('/images/off.png') 0 0px no-repeat;
height: 16px;
padding: 0 0 0 0px;
}
我的期望是,通过添加上面的CSS,复选框至少会默认显示处于OFF状态的图像,然后我会添加以下内容以获得ON
td:not(#foo) > input[type=checkbox]:checked + label {
background: url('/images/on.png') 0 0px no-repeat;
}
不幸的是,我似乎错过了某个关键步骤.我试图使用自定义CSS3选择器语法来匹配我当前的设置 - 但必须丢失一些东西(如果重要的话,图像大小为16x16)
http://www.w3.org/TR/css3-selectors/#checked
编辑:我在教程中遗漏了一些内容,他将图像更改应用于标签而不是输入本身.我仍然没有在页面上获得预期的交换图像以获得复选框结果,但我认为我更接近了.
我正在尝试使用css更改复选框的默认"框图像",但它无法正常工作.这有什么办法吗？
.class_checkbox{
background: url("../images/button_bullet_normal.png") no-repeat scroll 0 0 transparent;
}
在我做的类文件中
<input type="checkbox" class="class_checkbox">