Question

某些HTML表单元素附加了额外的UI，例如number上的向上/向下箭头。但是，当打印页面时，不再需要这些按钮，因为用户无法以打印形式与它们交互。

文本框易于处理：

@media print {
    input {
        border: none;
        border-bottom: 2px solid #000000;
    }
}

使它们打印得非常好，就像带有文字的线条一样。就像一个表格一样可以手工填写。但是对于像number这样的输入做同样的事情会让你留下那些令人讨厌的向上/向下箭头：

HTML <input type="number">

然后有更少有用的打印输出，例如range，这在页面上没有任何意义：

HTML <input type="range"

有没有办法解决这个问题？任何方式将元素的该部分设置为不可见，但仍然可以看到值/文本？

我意识到可以用JS替换type=""属性，或者让另一个元素保持在打印时显示的值，但是如果有一个只能用CSS完成的解决方案，那就更好了

Answer 1

您可以尝试使用CSS selectors

隐藏特定元素

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

但是，要隐藏number元素中的箭头，也许您可以尝试放置2个元素，1 text和1 number，然后显示{{1}在屏幕模式下，number被隐藏，反之亦然

text

可以为其他表单元素做类似的事情。如果您可以使用此方法，这将取决于您的实现。

Answer 2

这种效果可以在webkit浏览器中实现。我仍然找不到在其他方面做到这一点的方法，但它适用于webkit。

@media print {
    input::-webkit-outer-spin-button,  
        input::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }
}

Webkit实际上将这些按钮视为伪元素（有充分的理由）并提供隐藏它们的方法。这正是人们想要的行为，尽管仅限于webkit有点烦人。

Answer 3

更好的解决方案，因为它不使用供应商前缀，将使用output element。

原理

隐藏output;

@media screen

更新字段输入上的output元素的值;
切换input上output和@media print元素的展示次数。

→codepen available here。

HTML

<form onsubmit="return false" oninput="print.value = parseInt(screen.value)">
  <input class='screen' name="screen" type="number" value='0'> →
  <output class='print' name="print">5 (default print value)</output>
</form>
<p>The <code>output</code> element replace the <code>input</code> on print media</p>

CSS

.print {
  display: none;
}

@media print {
  .screen {
    display: none;
  }
  .print {
    display: inline-block;
  }
}

Answer 4

尝试在屏幕上使用隐藏测试，然后在打印时显示

@media print {
    .hideOnprint {
        display: none;
    }
    .hideOnScreen {
        display: block;
    }
}
@media screen {
    .hideOnprint {
        display: block;
    }
    .hideOnScreen {
        display: none;
    }
}

使用班级hideOnScreen影响文字以及类hideOnPrint

的输入

Answer 5

也许您应该使用简单的javascript来获取相关字段的值，打印操作，更改为可打印格式，执行打印并将其更改回正常状态？

真的不知道是否只使用CSS。

您可能需要考虑使用XML解析机制。对于此类任务，这是一种非常方便的方法。

http://webdesign.about.com/od/xslt/a/xslt-tutorial-1.htm

Answer 6

另一种方法是提供链接进行打印，并在没有所有额外内容的情况下拥有该页面的另一个副本

ie:        www.something.com/page.htm
printpage  www.something.com/page-print.htm

这是最常见的做法（另外，你可以重复使用css，只包含打印部分）

希望有所帮助

使用CSS打印HTML页面时隐藏表单控件

6 个答案:

原理

HTML

CSS