CSS:输入充当跨度(webkit)

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 添加到您的 fiddle 中:http://jsfiddle.net/rWySb/3/

请注意，不会有任何可见的变化，因为此样式仅适用于打印媒体，不适用于您的屏幕。使用浏览器中的打印预览来查看效果。或者更简单，肯定是在开发过程中，将媒体查询中的 print 临时更改为 screen。

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