Скрыть элементы управления формой при печати HTML-страницы с помощью CSS

некоторые элементы формы HTML имеют дополнительный пользовательский интерфейс, прикрепленный к ним, как стрелки вверх/вниз на number. При печати страницы, эти кнопки уже не нужны, так как пользователь не может взаимодействовать с ними в печатном виде.

текстовые поля легко иметь дело с:

@media print {
    input {
        border: none;
        border-bottom: 2px solid #000000;
    }
}

делает их печать довольно красиво, как строка с текстом на ней. Как форма, которую можно заполнить вручную. Однако делает то же самое для входов, таких как number оставляет вас с этими неприятными вверх / вниз стрелки:

HTML <input type="number">

и тогда есть еще менее полезные распечатки, такие как range, который ничего не значит, когда на странице:

HTML <input type="range"

есть ли способ обойти это? Любой способ стилизовать эту часть элемента, чтобы быть невидимым, но все равно видеть значение/текст?

Я понимаю, что можно поменять type="" атрибут с JS или другой элемент, содержащий значение, которое будет отображаться при печати, но если есть решение это можно сделать только с помощью CSS, это было бы лучше.

21
css css3 html html-form html5

6 ответов

вы можете попытаться скрыть определенные элементы с помощью селекторы CSS

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

однако, чтобы скрыть стрелки в number элемент, возможно, вы могли бы попытаться поставить 2 элемента вместо 1 text и 1 number, а затем отобразить number в режиме экрана, в то время как text скрыт, и наоборот в режиме печати

@media print {
    input[type=text] {
        display: inline-block;
        border:none;
        border-bottom:2px solid #000;
        etc..
    }
    input[type=number] {
        display: none;
    }
}
@media screen {
    input[type=number] {
        display: inline-block;
    }
    input[type=text] {
        display: none;
    }
}

что-то подобное можно сделать и для других элементов формы. Это будет зависеть от вашей реализации, если вы можете использовать это метод.

3

этот эффект может быть достигнут в браузерах webkit. Я все еще не могу найти способ сделать это в других, но он будет работать для webkit.

@media print {
    input::-webkit-outer-spin-button,  
        input::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }
}

Webkit фактически рассматривает эти кнопки как псевдо-элементы (с хорошей причиной) и предоставляет способ их скрыть. Это именно то поведение, которое хотелось бы, хотя быть ограниченным только webkit немного раздражает.

2

лучшим решением, поскольку он не использует префикс поставщика, будет использование output элемент.

принципы

  1. скрыть output элемент on @media screen ;
  2. обновить значение output элемент на поле ввода ;
  3. переключить видимость input и output элемент on @media print.

→ codepen доступно вот!--11-->.

HTML-код

<form onsubmit="return false" oninput="print.value = parseInt(screen.value)">
  <input class='screen' name="screen" type="number" value='0'> →
  <output class='print' name="print">5 (default print value)</output>
</form>
<p>The <code>output</code> element replace the <code>input</code> on print media</p>

в CSS

.print {
  display: none;
}

@media print {
  .screen {
    display: none;
  }
  .print {
    display: inline-block;
  }
}
2

попробуйте использовать скрытый тест на экране, а затем показать его на печать

@media print {
    .hideOnprint {
        display: none;
    }
    .hideOnScreen {
        display: block;
    }
}
@media screen {
    .hideOnprint {
        display: block;
    }
    .hideOnScreen {
        display: none;
    }
}

влияет на текст С класс hideOnScreen и вход с классом hideOnPrint

1

может быть, вы должны использовать простой javascript, чтобы получить только значения соответствующих полей, при действии печати, изменить формат печати, выполнить печать и изменить ее обратно в нормальное состояние?

действительно не знаю, можно ли использовать только CSS.

вы можете рассмотреть возможность использования механизма синтаксического анализа XML. Это действительно удобный метод для таких задач.

http://webdesign.about.com/od/xslt/a/xslt-tutorial-1.htm

0

альтернативой было бы предоставить ссылке для печати и иметь еще одну копию страницы без всех дополнительных вещей

ie:        www.something.com/page.htm
printpage  www.something.com/page-print.htm

Это наиболее распространенная практика (кроме того, вы можете повторно использовать css с печатью только частей в нем)

надеюсь, что это поможет

0