0

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

我需要类似这个例子的东西。

它只需要与 webkit/chrome 兼容，所以我可以使用-webkit-appearence例如。主要问题是：只有CSS是可能的，还是我需要使用 javascript？

4

1 回答 1

0

我认为您想要的是表单元素看起来像普通文本，至少在打印时是这样。这确实很有可能。您可以使用媒体查询将自定义样式添加到仅适用于印刷媒体的 CSS@media print

代码看起来像这样：

@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
这不是必需的，但包含一些可能对您有用的技巧和想法，因为您正在使用打印的网页 atm。 ..

于 2013-04-09T18:55:50.703 回答