CSS：输入作为范围（webkit）

有可能input, select, textarea充当span？我的想法是创建一个打印媒体CSS，它可以将表单的所有输入视觉变换为视觉范围，以便无需使用JavaScript转换所有内容或创建特定页面进行打印即可进行打印。CSS：输入作为范围（webkit）

我需要类似this example。

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

来源

2013-04-09 David Rodrigues

什么约只是他们的造型？http://jsfiddle.net/ks89v/ – David 2013-04-09 18:23:42

因为如果内容大于输入大小并且在需要时不断行，它会被切断。 – 2013-04-09 21:21:25

我想你想要的是表单元素看起来像普通文本，至少当他们正在打印。这确实是非常有可能的。您可以添加自定义样式到你的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-09 18:55:50 Pevara

您的解决方案很好，但如果我有多行或切断内容，它将不起作用。例如，如果textarea的值大于可用空间。相同以选择或输入选项。我在想，这将是需要我使用JavaScript的情况下。 – 2013-04-09 21:24:20

这确实是一个大内容的问题。我试着用'：after'和'attr（value）'来玩弄，但由于输入没有真正的内容（），这似乎不起作用。皮蒂，但我认为js将是你唯一的出路......（尽管如此，不应该很难。） – Pevara 2013-04-09 22:39:14

CSS：输入作为范围（webkit）

回答

相关问题