CSS不打印未选中/选中的单选按钮或复选框

Question

我有一个表单,我想要一个单独的CSS文件进行打印.屏幕上还有其他单选按钮和复选框.但我希望那些未经检查的单选按钮和复选框在我打印时隐藏.

有没有办法使用jQuery在这些标签和相应的复选框上设置类,以便@media打印隐藏它们？

Answer 1

在一个@media print { ... }块中,您可以隐藏所有复选框,然后仅显示选中的复选框.

要定位这些选中的复选框,请使用checked输入的属性.

@media print {
    input[type="checkbox"] {
        display: none;
    }

    input[type="checkbox"][checked="checked"] {
        display: inline-block;
    }
}

看到这个小提琴http://jsfiddle.net/XfpM6/它只显示两个选中的复选框.

编辑:

要隐藏标签,您可以使用+选择器,该选择器以直接兄弟为目标.这将是:

input[type="checkbox"] + label {
    display: none;
}

input[type="checkbox"][checked="checked"] + label {
    display: inline;
}

(假设您以这种方式拥有HTML <input type="checkbox" .. /> <label for="..">Label</label>,否则您必须为每个添加一个类label来隐藏).

关于media print,你在css 之后添加了screencss吗？

另一个解决方案可能是摆脱@media print阻塞,并包括css

<link rel="stylesheet" href="..." media="print" />

在你的CSS链接的末尾(所以它覆盖其他规则).

这将是相同的,关键是你在CSS 后screen包含这个CSS.