21

特定の HTML フォーム要素には、上矢印と下矢印のように追加の UI が追加されていnumberます。ただし、ページを印刷する場合、ユーザーは印刷形式でボタンを操作できないため、これらのボタンは不要になります。

テキストボックスは扱いやすいです:

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

テキスト付きの線として、非常にきれいに印刷されます。手で記入するフォームのように。ただし、次のような入力に対して同じことを行うnumberと、厄介な上下矢印が表示されます。

HTML <入力タイプ=

rangeそして、ページ上では何の意味もないのような、あまり役に立たない出力もあります。

HTML <入力タイプ=

これを回避する方法はありますか？要素のその部分を非表示にスタイルする方法はありますが、値/テキストは表示されますか?

属性を JS に交換しtype=""たり、値を保持する別の要素を印刷に表示したりできることはわかっていますが、CSS のみで実行できるソリューションがあれば、それが優れています。

4

6 に答える 6

2

ベンダープレフィックスを使用しないため、より良い解決策はoutput要素を使用することです。

原則

  1. output要素を非表示にし@media screenます。
  2. outputフィールド入力の要素の値を更新します。
  3. inputと のoutput要素の可視性を切り替えます@media print。

→ codepenはこちらから入手できます。

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;
  }
}
于 2015-06-30T10:17:57.647 に答える