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

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

Текстовые поля легко справляются с:

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

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

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

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

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

Ответы

Ответ 1

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

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

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

Ответ 2

Вы можете скрыть определенные элементы с помощью селекторов 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

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

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

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

Ответ 4

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

Принципы

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

→ код доступен здесь.

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;
  }
}

Ответ 5

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

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

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

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

Ответ 6

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

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

это наиболее распространенная практика (также вы можете повторно использовать css с частями только для печати)

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