title: Hide form controls when printing an HTML page with CSS
body: <p>Certain HTML form elements have extra UI attached to them, like the up/down arrows on <code>number</code>. When printing the page however, those buttons are no longer needed, as the user can not interact with them in print form.</p>
  
  <p>Text boxes are easy to deal with:</p>
  
  <pre><code>@media print {
      input {
          border: none;
          border-bottom: 2px solid #000000;
      }
  }
  </code></pre>
  
  <p>Makes them print quite nicely, as a line with text on it. Just like a form one would fill out by hand. However doing the same for inputs like <code>number</code> leaves you with those nasty up/down arrows:</p>
  
  <p><img src="https://i.stack.imgur.com/68n8p.png" alt="HTML &lt;input type=&quot;number&quot;&gt;"></p>
  
  <p>And then there are even less useful printouts, like <code>range</code>, which means nothing when on a page:</p>
  
  <p><img src="https://i.stack.imgur.com/rF3lS.png" alt="HTML &lt;input type=&quot;range&quot;"></p>
  
  <p>Is there any way to get around this? Any way to style that portion of the element to be invisible, but still see the value/text?</p>
  
  <p>I realize one could swap out the <code>type=""</code> attribute with JS, or have another element holding the value to be displayed on print, but if there is a solution that can be done with CSS only, that would be superior.</p>