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）

回答

相關問題