All geek questions in one place

HTML input style to hide a field but show content

I have a form in HTML where our users fill in the data and then print it. Data is not saved anywhere. These forms come from outside our company and are built as html pages to resemble the original as close as possible, and then they are filled and forgotten in a folder on the intranet. Usually another developer does this, but I have to do a few while it exits. Looking through your code, all its forms have a bunch of server-side code for entering inputs and rewriting a page with only content. There seems to be a better way.

I just want to stylize the text inputs with the multimedia selector so that when you print, you can see the text, but nothing from its surroundings. Any thoughts?

+4
source share
3 answers

Add a separate CSS file for printing by doing something like this:

<link rel="stylsheet" type="text/css" media="print" href="print.css">

add it to the <head> section of the page.

This file (print.css) uses a style that matches what you want to see when printing a page, for example:

input{border: 0px} should hide the border of input fields when printing. A.

+11
source

Assuming you want to remove a border, etc. from texts, you need to give them a class. Maybe something like:

 <input type="text" class="print-clean" .../>

And css loaded by media = "print":

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

will contain something like this:

 .print-clean { border: none; background: transparent; }
+6
source 
 <input type="text" style="border: 0; background-color: #fff;" />

Where #fff is the background color.

+3
source

Source: https://habr.com/ru/post/1277299/

More articles:


All Articles