Connecting Tech Pros Worldwide Help | Site Map

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

 
LinkBack Thread Tools Search this Thread
  #1  
Old August 19th, 2008, 02:55 AM
Zhang Weiwu
Guest
 
Posts: n/a
Default in print output hide content in <input> but keeps the border

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?

  #2  
Old August 19th, 2008, 05:15 AM
BootNic
Guest
 
Posts: n/a
Default Re: in print output hide content in <input> but keeps the border

On Tue, 19 Aug 2008 10:52:01 +0800
Zhang Weiwu <zhangweiwu@realss.comwrote in:
<6guqqkFhb1kcU1@mid.individual.net>
Quote:
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]
Quote:
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-----

  #3  
Old August 19th, 2008, 03:05 PM
Harlan Messinger
Guest
 
Posts: n/a
Default Re: in print output hide content in <input> but keeps the border

BootNic wrote:
Quote:
On Tue, 19 Aug 2008 10:52:01 +0800
Zhang Weiwu <zhangweiwu@realss.comwrote in:
<6guqqkFhb1kcU1@mid.individual.net>
>
Quote:
>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]
Quote:
>Any suggestion?
>
Have you tried color:transparent;
The value "transparent" is valid only for background-color, not for color.
  #4  
Old August 19th, 2008, 04:15 PM
BootNic
Guest
 
Posts: n/a
Default Re: in print output hide content in <input> but keeps the border

On Tue, 19 Aug 2008 11:02:25 -0400
Harlan Messinger <hmessinger.removethis@comcast.netwrote in:
<6h05m5Fhje0gU1@mid.individual.net>
Quote:
BootNic wrote:
Quote:
>On Tue, 19 Aug 2008 10:52:01 +0800
>Zhang Weiwu <zhangweiwu@realss.comwrote in:
><6guqqkFhb1kcU1@mid.individual.net>
>
Quote:
>>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]
Quote:
>>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-----

  #5  
Old August 19th, 2008, 07:15 PM
Harlan Messinger
Guest
 
Posts: n/a
Default Re: in print output hide content in <input> but keeps the border

BootNic wrote:
Quote:
On Tue, 19 Aug 2008 11:02:25 -0400
Harlan Messinger <hmessinger.removethis@comcast.netwrote in:
<6h05m5Fhje0gU1@mid.individual.net>
>
Quote:
>BootNic wrote:
Quote:
>>On Tue, 19 Aug 2008 10:52:01 +0800
>>Zhang Weiwu <zhangweiwu@realss.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: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?
  #6  
Old August 20th, 2008, 08:55 PM
Helpful person
Guest
 
Posts: n/a
Default Re: in print output hide content in <input> but keeps the border

On Aug 18, 10:52*pm, Zhang Weiwu <zhangwe...@realss.comwrote:
Quote:
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.
  #7  
Old August 20th, 2008, 08:55 PM
Harlan Messinger
Guest
 
Posts: n/a
Default Re: in print output hide content in <input> but keeps the border

Helpful person wrote:
Quote:
On Aug 18, 10:52 pm, Zhang Weiwu <zhangwe...@realss.comwrote:
Quote:
>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.
  #8  
Old August 20th, 2008, 11:35 PM
Bergamot
Guest
 
Posts: n/a
Default Re: in print output hide content in <input> but keeps the border


Jonathan N. Little wrote:
Quote:
@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
  #9  
Old August 21st, 2008, 04:05 AM
Jonathan N. Little
Guest
 
Posts: n/a
Default Re: in print output hide content in <input> but keeps the border

Bergamot wrote:
Quote:
Jonathan N. Little wrote:
Quote:
> @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
 

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Popular Articles

What is Bytes?

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over 220,989 network members.