打印樣式表 - 輸入轉換爲文本

我有，有一些<input type="text">盒中有一個表，我想這些打印時，顯示爲普通文本。我已經建立了一個媒體=「打印」與打印樣式表 - 輸入轉換爲文本

input 
{ 
border-style: none; 
}

它

樣式表，這樣可以消除邊境所以內容只是看起來像文本，但輸入仍然推列的寬度，以它的實際寬度（不奇怪），所以我得到不必要的空白空間和列寬。有沒有一種時髦的方式來設置輸入的寬度使用CSS的內容大小，或其他方式來解決這個問題？在另一個論壇

有人用它創建客戶端腳本物理地改變頁面標記打印按鈕建議，但不幸的是，這不是真正實用，由於複雜性和網頁的動態特性。

我很確定這不能完成，但我想我會問。

來源

2010-02-23 Mad Halfling

順便說一下：由於錯誤（!!），輸入上的'overflow：visible'在IE6/7中工作。 – BalusC 2010-02-23 13:22:16

您是否找到了使用jQuery的其他答案？ – L84 2011-07-19 02:06:12

不，我不認爲沒有一些腳本就可以做到這一點。但是，腳本會很方便地實現與像jQuery框架：

對於每個輸入元素，你接下來會創建一個<span>給它，並給它被隱藏在media="screen"樣式表類，並可見在media="print"。
輸入元素本身會得到一個相反的類，在screen中可見並隱藏在print中。
每個輸入元素將得到一個change事件，該事件更新鄰居span。

我沒有JQuery的程序還沒有完成這出我的衣袖，而不是把它在一起，現在的時間，但它絕對是可以解決的，仍然相當不顯眼 - 無需執行任何當用戶開始打印時編寫腳本。

我敢打賭，如果你重新標記的問題或要求一個新的，我們的居民的一個JQuery的大師們將在這看看:)

來源

2010-02-23 13:29:38

感謝您的建議 - 我正在使用（並且相當有能力）JQuery，但是有一個動態創建的輸入的整個負載，所以把它放在（已經很複雜的）代碼中會相當複雜，所以我想避免如果可能的話，那麼我的想法就是用CSS來做這件事 - 目前還不完美，但這並不算太壞。 – 2010-02-23 21:20:06

謝謝，我自己可以做到這一點，但它會是一個野獸，功能與額外測試的權衡是不值得的（我知道它聽起來像它不會那麼複雜，但這個頁面正在轉向變成一個怪物，嘿嘿）。非常感謝您的建議，也許它會幫助別人 – 2010-02-26 17:41:15

我還沒有發現一種情況，但'border：0;'不起作用。給它開槍！ – roberthuttinger 2013-05-03 18:09:42

input { border-style: none; display: inline}

來源

2010-02-24 13:03:27 graphicdivine

不錯的想法，但它不起作用。 – casraf 2010-02-24 13:18:55

是的，我試過了，它不起作用（至少在IE8下） - 文本框仍然保留在頁面上的空間，不要摺疊以適合他們的內容文本（謝謝，無論如何，建議） – 2010-02-24 21:12:05

我碰到這個搜索出來的信息，如何風格我的形式和其他一些東西。

搞亂了一些CSS後，我想出了一個只適用於我的CSS方法。

我的表單都具有涉及顏色背景和黑色邊框的樣式。

在我打印的CSS文件我複製我的表單CSS和改變了所有的顏色（而不是文本自身）的白色。換句話說，它隱藏了我的文本框並僅顯示文本。

Original CSS - #form textarea，＃form input，#form select {border：1px solid #ddd;顏色：＃313131; }

打印CSS - #form textarea，#form input，#form select {border：1px solid #fff;顏色：#FFF; }

就像一個魅力=>

希望這可以幫助我使用ASP.NET

來源

2011-07-19 04:34:26 L84

看到我對上面答案的評論，'border：0;'完成了同樣的事情！ – roberthuttinger 2013-05-03 18:10:37

，並有同樣的問題。

我解決它通過添加對應於我的文本框一個標籤，並有兩班設置：

在@media屏幕：

.hdnPrint {visibility:visible;display:block;} 
.visPrint {visibility:hidden;display:none;}

在@media打印：

.hdnPrint {visibility:hidden;display:none;} 
.visPrint {visibility:visible;display:block;}

對於文本框，我分配了hdnPrint類，並在標籤上分配了visPrint類。當用戶打印表單時，將顯示標籤並隱藏表單域。

我假設你可以按照相同的模式在非ASP.NET環境中做類似的事情。

無需腳本。

來源

2013-12-13 16:00:29 Tim

如果使用自舉：

@media print { 
    .no-print { 
    display: none !important; 
    } 

    .form-control 
    { 
    border: 0; 
    padding:0; 
    overflow:visible; 
    } 
}

來源

2015-12-23 21:19:55 user5712635

要定義在CSS打印部分中的輸入字段的寬度，使用：

width: ?cm

用於相應的輸入元件。

經過Firefox測試;也許它在以前版本的瀏覽器中不起作用。

來源

2016-10-11 09:45:47 Olivier

打印樣式表 - 輸入轉換爲文本

回答

相關問題