in print output hide content in <input> but keeps the border

[Zhang Weiwu]

hello.

Is it possible to design CSS in the way that content in <inputare not
visible in print out (a.k.a. value of <inputnot visible) while the
border remain visible?

trial:

input {
border: thin solid black;
visibility: hidden;
}

result:

border also hidden.

trial:

input {
border: thin solid black;
color: white;
}

result:

IE fine. In firefox, the printed color automatically change to black

trial:

input {
border: thin solid black;
color: #eeee;
}

result
same as above.

trial:

@media print {
input {
border: thin solid black;
color: #eeee;
}
}

result
same as above.

Note that adding a container around <inputwould solve the problem by
defining border for the container and set <inputhidden. However this
is a last resort because in the web application I am working on, <input>
is generated by a widget library that refer to this element in 100
different places by javascript, adding a container around <inputwould
mean I have to work on a dozen javascripts that assumed <inputdoesn't
have a container.

Any suggestion?

[BootNic]

On Tue, 19 Aug 2008 10:52:01 +0800
Zhang Weiwu <zh********@realss.comwrote in:
<6g************@mid.individual.net>

hello.

Is it possible to design CSS in the way that content in <inputare
not visible in print out (a.k.a. value of <inputnot visible) while
the border remain visible?

[snip]

Any suggestion?

Have you tried color:transparent;
--

BootNic Tue Aug 19, 2008 01:06 am
A person without a sense of humor is like a wagon without springs,
jolted by every pebble in the road.
*Henry Ward Beecher*

-----BEGIN PGP SIGNATURE-----
Version: GnuPG v2.0.9 (GNU/Linux)

iEYEARECAAYFAkiqVPwACgkQylMUzZO6jeIotQCgneqPeT9BbO r8T4W8lkl5L5wY
YKAAnjVuzEn5wQjSevHNsTF33qs5R3ZY
=u1is
-----END PGP SIGNATURE-----

[Harlan Messinger]

BootNic wrote:

On Tue, 19 Aug 2008 10:52:01 +0800
Zhang Weiwu <zh********@realss.comwrote in:
<6g************@mid.individual.net>

>hello.

Is it possible to design CSS in the way that content in <inputare
not visible in print out (a.k.a. value of <inputnot visible) while
the border remain visible?

[snip]

>Any suggestion?

Have you tried color:transparent;

The value "transparent" is valid only for background-color, not for color.

[BootNic]

On Tue, 19 Aug 2008 11:02:25 -0400
Harlan Messinger <hm*******************@comcast.netwrote in:
<6h************@mid.individual.net>

BootNic wrote:

>On Tue, 19 Aug 2008 10:52:01 +0800
Zhang Weiwu <zh********@realss.comwrote in:
<6g************@mid.individual.net>

>>hello.

Is it possible to design CSS in the way that content in <inputare
not visible in print out (a.k.a. value of <inputnot visible) while
the border remain visible?

[snip]

>>Any suggestion?

Have you tried color:transparent;

The value "transparent" is valid only for background-color, not for color.

True it is. Did ya give it a go in FireFox?

<style type="text/css" media="print">
input, x:-moz-any-link {
color:transparent;
}
</style>

--

BootNic Tue Aug 19, 2008 12:08 pm
Nothing is stronger than habit.
*Ovid*

-----BEGIN PGP SIGNATURE-----
Version: GnuPG v2.0.9 (GNU/Linux)

iEYEARECAAYFAkiq8CQACgkQylMUzZO6jeIO3ACcDApfpTrSaA xXWfHdUVmeaRtA
ngcAoM7cmidgXT64eeytnlEOdGFr3ixE
=M6Pg
-----END PGP SIGNATURE-----

[Harlan Messinger]

BootNic wrote:

On Tue, 19 Aug 2008 11:02:25 -0400
Harlan Messinger <hm*******************@comcast.netwrote in:
<6h************@mid.individual.net>

>BootNic wrote:

>>On Tue, 19 Aug 2008 10:52:01 +0800
Zhang Weiwu <zh********@realss.comwrote in:
<6g************@mid.individual.net>

hello.

Is it possible to design CSS in the way that content in <inputare
not visible in print out (a.k.a. value of <inputnot visible) while
the border remain visible?

[snip]
Any suggestion?
Have you tried color:transparent;

The value "transparent" is valid only for background-color, not for color.

True it is. Did ya give it a go in FireFox?

<style type="text/css" media="print">
input, x:-moz-any-link {
color:transparent;
}
</style>

Does it work? Does it depend on whether you're using a doctype that puts
Firefox into standards mode?

[Helpful person]

On Aug 18, 10:52*pm, Zhang Weiwu <[e-mail]:

hello.

Is it possible to design CSS in the way that content in <inputare not
visible in print out (a.k.a. value of <inputnot visible) while the
border remain visible?

trial:

* input {
* *border: thin solid black;
* *visibility: hidden;
* }

result:

* border also hidden.

trial:

* input {
* *border: thin solid black;
* *color: white;
* }

result:

* IE fine. In firefox, the printed color automatically change to black

trial:

* input {
* *border: thin solid black;
* *color: #eeee;
* }

result
* same as above.

trial:

* @media print {
* *input {
* * *border: thin solid black;
* * *color: #eeee;
* *}
* }

result
* same as above.

Note that adding a container around <inputwould solve the problem by
defining border for the container and set <inputhidden. However this
is a last resort because in the web application I am working on, <input>
is generated by a widget library that refer to this element in 100
different places by javascript, adding a container around <inputwould
mean I have to work on a dozen javascripts that assumed <inputdoesn't
have a container.

Any suggestion?

Have you considered

display: none

This may do what you want.

[Harlan Messinger]

Helpful person wrote:

On Aug 18, 10:52 pm, Zhang Weiwu <[e-mail]:

>hello.

Is it possible to design CSS in the way that content in <inputare not
visible in print out (a.k.a. value of <inputnot visible) while the
border remain visible?

trial:

input {
border: thin solid black;
visibility: hidden;
}

result:

border also hidden.

trial:

input {
border: thin solid black;
color: white;
}

result:

IE fine. In firefox, the printed color automatically change to black

trial:

input {
border: thin solid black;
color: #eeee;
}

result
same as above.

trial:

@media print {
input {
border: thin solid black;
color: #eeee;
}
}

result
same as above.

Note that adding a container around <inputwould solve the problem by
defining border for the container and set <inputhidden. However this
is a last resort because in the web application I am working on, <input>
is generated by a widget library that refer to this element in 100
different places by javascript, adding a container around <inputwould
mean I have to work on a dozen javascripts that assumed <inputdoesn't
have a container.

Any suggestion?

Have you considered

display: none

This may do what you want.

That will hide the input field. The OP said he only wants to hide the
text *in* the field.

[Bergamot]

Jonathan N. Little wrote:

@media print {
form span input { visibility: hidden; }
form span { border: 1px solid black; }
}

<span><input type="text" value="Not printable"></span>

Or simpler, maybe:
@media print {
input[type="text"] {background:#fff; color:#fff}
}

--
Berg

[Jonathan N. Little]

Bergamot wrote:

Jonathan N. Little wrote:

> @media print {
form span input { visibility: hidden; }
form span { border: 1px solid black; }
}

<span><input type="text" value="Not printable"></span>

Or simpler, maybe:
@media print {
input[type="text"] {background:#fff; color:#fff}
}

It would be if it would work, unfortunately Gecko at least seems to
override the style internally. If the form field is printable so will
the text!

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com