How to make foo invisible using CSS (CSS3 if needed) while keeping bar and fizz visible?

      <input type='button' title='fizz' />

Making foo in the same color as background is acceptable, but the trick is - background is an image, hence - foo must be transparent instead of solid color.

JavaScript isn't an option either.

Changing HTML is not an option either.

Any ideas?

+1  A: 

You need to put it inside a container like a div then hide the container ..

Sorry... Forgot to mention that can't change html either. :)
Arnis L.

Set the size of the td to be the same as the size of the textarea (via CSS width and height), then set overflow: hidden on the TD so that the text you want to hide is outside the bounding box?

That might work... There's button before `foo`. I guess it must be set to display:block, right (some padding-bottom maybe)?
Arnis L.
Nope... i guess it won't work cause of button.
Arnis L.
If you know the size of the button, you could add that to the size of the TD (and yes, set the button to block, so that the text will get pushed down below it).
Already used technique in Your alternate answer. Thanks.
Arnis L.
+3  A: 

EDIT: Scott's is better. Use his.

I don't think a proper solution is going to be pretty.

td {
    position: relative;
    left: 9001px;

textarea {
    position: relative;
    right: 9001px;
Thom Smith
I was just about to post the same thing. Bravo!
But what happens when somebody comes along that has a 12000px screen? This would have been my solution also so I will vote you up. :-)
It helped. Things look real fancy now.
Arnis L.
Just wanted you to be aware, I discovered a better way (see second part of my answer)
@Justin, Then have some JavaScript to wrap the text and hide it. I'm not sure we'll see 12000px displays any time soon, and by then people will probably have JS enabled anyway.

whoops... should've read the OP a bit more closely. Guess the following won't work after all, since changing the html isn't an option.

Set a css class on the container you want to hide (the textarea?):

   <textarea class="hideme">bar</textarea>

and the following css:

.hideme {
   display: hidden;

'hidden' makes the element disappear (it's literally not displayed), but still is still accounted for in the document flow and takes up the space it normally would. If you want it to literally be gone and not have any effect on the document, then use display: none.

Marc B

How about the reverse of Amber's suggestion -

Set overflow to overflow: hidden on the TD, fix the size where it is right now and add a huge padding-bottom on the textarea or button.

Don't know. Fixed with `position:relative`. Too lazy to check out. :)
Arnis L.

If you don't have to support IE then setting the text to transparent is easy:

table {
    background-color: cyan;
td {
    color: rgba(255,255,255,0);
td textarea, td input {
    color: #000;
+4  A: 

This worked fine in IE8 and Firefox (IE7 left little dots for words, which I guess if you set the font-color to something that blends with the background image, it might do fine. Note that this does not affect either the text-area or the input for any text in them.

td {font-size: 0;}


WOW I mean, really! This worked on IE7-8, Firefox, and Safari

td {visibility: hidden}
td textarea,
td input {visibility: visible;}

As a side note, I tested this with elements wrapped in div rather than a table, I even did a div in a div and the inner div shows while other content is hidden.

Apparently, the visibility property acts on the element, and (unlike opacity) propagates to the child elements by inheritance, so that if one explicitly sets a child element visibility it no longer inherits the hidden but uses its own setting of visible and the fact that the wrapper is hidden does not matter.

This is vaguely what I thought of, but I reasoned you can't re-visible-ize a child element. I guess you can...