Question

input, select, textarea可能会span吗？我的想法是创建一个打印媒体CSS，可以直观地将表单的所有输入转换为可视范围，以便能够打印它而无需使用javascript转换所有内容或创建要打印的特定页面。

我需要像this example这样的东西。

它只需与webkit / chrome兼容，因此我可以使用-webkit-appearence。主要问题是：只使用 CSS，或者我需要使用javascript吗？

Answer 1

我认为你想要的是表单元素看起来像普通文本，至少在打印时是这样。这确实非常有可能。您可以使用媒体查询@media print

向CSS添加自定义样式，仅适用于打印介质

代码看起来像这样：

@media print {
     input, textarea, select {
        border: none;
        display: block;
        font-family: consolas, monotype;
        font-size: 14px;
        width: 100%;
        height: auto;
        background: transparent;
        -webkit-appearance:none;
    }
}

我已将css添加到您的小提琴中：http://jsfiddle.net/rWySb/3/

请注意，不会有任何可见的更改，因为此样式仅适用于打印介质，而不适用于您的屏幕。使用浏览器中的打印预览查看效果。或者更容易，绝对是在开发过程中，暂时将媒体查询中的print更改为screen。

请注意，我还添加了我在每个项目中使用的默认打印样式，实际上是从HTML5样板中“借用”的。 https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css
这不是必需的，但包含一些可能对您有用的好技巧和想法，因为您正在处理印刷网页...

CSS：输入充当span（webkit）

1 个答案: