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]

Re: in print output hide content in &lt;input&gt ; but keeps the border

On Tue, 19 Aug 2008 10:52:01 +0800
Zhang Weiwu <zhangweiwu@rea lss.comwrote in:
<6guqqkFhb1kcU1 @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:transpare nt;
--

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)

iEYEARECAAYFAki qVPwACgkQylMUzZ O6jeIotQCgneqPe T9BbOr8T4W8lkl5 L5wY
YKAAnjVuzEn5wQj SevHNsTF33qs5R3 ZY
=u1is
-----END PGP SIGNATURE-----

[Harlan Messinger]

Re: in print output hide content in &lt;input&gt ; but keeps the border

BootNic wrote:

On Tue, 19 Aug 2008 10:52:01 +0800
Zhang Weiwu <zhangweiwu@rea lss.comwrote in:
<6guqqkFhb1kcU1 @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:transpare nt;

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

[BootNic]

Re: in print output hide content in &lt;input&gt ; but keeps the border

On Tue, 19 Aug 2008 11:02:25 -0400
Harlan Messinger <hmessinger.rem ovethis@comcast .netwrote in:
<6h05m5Fhje0gU1 @mid.individual .net>

BootNic wrote:

>On Tue, 19 Aug 2008 10:52:01 +0800
>Zhang Weiwu <zhangweiwu@rea lss.comwrote in:
><6guqqkFhb1kcU 1@mid.individua l.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:transpare nt;

The value "transparen t" 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:transpare nt;
}
</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)

iEYEARECAAYFAki q8CQACgkQylMUzZ O6jeIO3ACcDApfp TrSaAxXWfHdUVme aRtA
ngcAoM7cmidgXT6 4eeytnlEOdGFr3i xE
=M6Pg
-----END PGP SIGNATURE-----

[Harlan Messinger]

Re: in print output hide content in &lt;input&gt ; but keeps the border

BootNic wrote:

On Tue, 19 Aug 2008 11:02:25 -0400
Harlan Messinger <hmessinger.rem ovethis@comcast .netwrote in:
<6h05m5Fhje0gU1 @mid.individual .net>
>

>BootNic wrote:

>>On Tue, 19 Aug 2008 10:52:01 +0800
>>Zhang Weiwu <zhangweiwu@rea lss.comwrote in:
>><6guqqkFhb1kc U1@mid.individu al.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:transpare nt;

>The value "transparen t" 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:transpare nt;
}
</style>
>

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

[Helpful person]

Re: in print output hide content in &lt;input&gt ; but keeps the border

On Aug 18, 10:52 pm, Zhang Weiwu <zhangwe...@rea lss.comwrote:

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]

Re: in print output hide content in &lt;input&gt ; but keeps the border

Helpful person wrote:

On Aug 18, 10:52 pm, Zhang Weiwu <zhangwe...@rea lss.comwrote:

>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]

Re: in print output hide content in &lt;input&gt ; but keeps the border


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:#ff f; color:#fff}
}

--
Berg

[Jonathan N. Little]

Re: in print output hide content in &lt;input&gt ; but keeps the border

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:#ff f; 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