CSS不打印未經檢查/選定的單選按鈕或複選框

我有一個表單，我想要一個單獨的CSS文件進行打印。在屏幕上還有其他單選按鈕和複選框。但我希望那些未經檢查的單選按鈕和複選框在我打印時隱藏。CSS不打印未經檢查/選定的單選按鈕或複選框

有沒有辦法使用jQuery來設置這些標籤上的類和相應的複選框，以便@media print隱藏它們？

2011-06-16 swg1cor14

在一個@media print { ... }塊可以隱藏所有的複選框，然後顯示只檢查複選框。

要定位這些選中的複選框，請使用輸入的checked屬性。

@media print { 
    input[type="checkbox"] { 
     display: none; 
    } 

    input[type="checkbox"][checked="checked"] { 
     display: inline-block; 
    } 
}

看到這個小提琴http://jsfiddle.net/XfpM6/它只顯示了兩個選定的複選框。

編輯：

要隱藏你可以使用+選擇，它的目標直接兄弟標籤。這將是：

input[type="checkbox"] + label { 
    display: none; 
} 

input[type="checkbox"][checked="checked"] + label { 
    display: inline; 
}

（假如你有這樣的<input type="checkbox" .. /> <label for="..">Label</label> HTML，否則你有一類添加到每個label隱藏）。

關於media print，您是否在之後添加了css ？screen css？

另一種解決方案可能是擺脫@media print塊，幷包括你的CSS鏈接（所以它覆蓋其他規則）的一端與

<link rel="stylesheet" href="..." media="print" />

的CSS。

這將是一樣的，關鍵是你包括這個css 後screen css。

來源

2011-06-16 15:33:14

值得一提的，是IE6不支持此。 – RoToRa 2011-06-16 15:35:52

我有很多我的代碼，不會與IE6的工作，所以我有一個警告框，如果他們的用戶有一箇舊的瀏覽器。 – swg1cor14 2011-06-19 15:45:17

不起作用。另外我想隱藏相應的標籤。這是網頁。 [鏈接]（http://agent.thepiagency.com/agents/intake.php?id=2） – swg1cor14 2011-06-19 15:51:12

你可以做到這一點使用CSS，只是檢查了checked屬性的存在

@media print{ 
    input[type="checkbox"] 
    { 
    visibility: hidden; 
    } 


    input[type="checkbox"][checked] 
    { 
    visibility: visible; 
    } 
}

小提琴：http://jsfiddle.net/L3Bwp/1/

來源

2011-06-16 15:38:28 Mutt

這兩個答案都顯示這在正常的CSS工作，但沒有證明它在@media打印。請參閱我上面的回覆鏈接到示例頁面。 – swg1cor14 2011-06-19 16:10:21

證明它的唯一方法是在瀏覽器中進行打印預覽。 – Mutt 2011-06-20 12:05:50

我做了，他們都消失了。被檢查的人不會回來。我正在Firefox 4中測試 – swg1cor14 2011-06-20 21:59:45

CSS不打印未經檢查/選定的單選按鈕或複選框

回答

相關問題