CSS не печатает непроверенные / выбранные переключатели или флажки - PullRequest
Новая
       26

CSS не печатает непроверенные / выбранные переключатели или флажки

2 голосов
/ 16 июня 2011

У меня есть форма, которую я хочу отдельный файл CSS для печати. На экране есть другие радио-кнопки и флажки. Но я хочу, чтобы эти непроверенные переключатели и флажки скрывались при их печати. ​​

Есть ли способ использовать jQuery для установки классов на эти метки и соответствующие флажки, чтобы @media print скрывал их?

Ответы [ 2 ]

6 голосов
/ 16 июня 2011

В блоке @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;
}

(Предположим, у вас есть HTML таким образом <input type="checkbox" .. /> <label for="..">Label</label>, в противном случае вам нужно добавить класс к каждому label, чтобы скрыть).

Относительноmedia print, вы добавили этот css после screen css?

Другим решением может быть избавление от блока @media print и включение css с 

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

в конце ваших ссылок CSS (так что он переопределяет другие правила).

Это будет то же самое, главное, что вы включаете этот CSS после screen css .

0 голосов
/ 16 июня 2011

Вы можете сделать это с помощью CSS, просто проверьте наличие атрибута checked 

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


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

Скрипка: http://jsfiddle.net/L3Bwp/1/

...