How can I hide HTML elements using just CSS?

visibility: hidden;
opacity: 0;

Excellent!

Though I should add that I do want browser compatibility, so opacity (which is new in CSS 3) isn’t what I’m looking for :)

Opacity works in IE7 and FF2…so it’s…I’m not sure…haha.

Does it? And in IE6?

IE6, nope. But one of the other methods up there will cover it. Mainly display: none;

Cool. It’s just that each method has to work as I want to interchange between all methods.

The majority of browsers today support CSS, heck even IE3 did over a decade ago, I guess you’re setting this up for what, a small phone browser? Even then they have limited CSS supoprt I’m sure. I’m just interested in seeing what this is about hehe.

@Skyrail – actually, it’s just for modern browsers.

What I’m doing is adding an input field to a web form that needs to be left empty – if there’s something in it then it’s a bot. Since most bots understand <input type=“hidden”> that can’t be used. CSS can be used to hide that input element and a label saying the element should be left empty, so real people won’t even know it’s there, and if they do, they’ll leave it empty.

A bot, however, will fill it in so I know it’s spam.

The reason I want different styling rules is so I can alternate between them so even if bots support “display: none;” there’s also a change that it will be hidden using other methods.

Ah that is quite ingenious, is this a simpler alternative to using a capatcha? Although capatcha’s do slow web page loading times down noticibly on slower servers :) Thanks for enlightening me :)

Well, I didn’t think of it myself, of course :P

I believe it’s often called a “Reverse Captcha” (at least that’s what I named it in my personal library) and it’s primary advantage is that it does not require user intervention and is easy to create. With a normal captcha, the visitor needs to prove he is a human, with a reverse captcha, the bot will prove that he is a bot – the user needn’t know anything about it. And I suppose it’s faster too.

It’s very rudimentary though, and probably won’t hold the spambots out for long.

position:absolute;
left:-1000000000000px; (or)
top:-1000000000000px;

or change the z-index,and position,taht make one other ele be over it

Interesting topic, I’d be willing to see this subjected to various bots to see if it actually is effective. Captchas are getting to the point that it’s often hard to prove you’re human due to the extreme distortion required to fool the computers. I’m going to research the subject, but this would be a great solution!

I’ve seen capachas that ask you to do simple math, like 2 * 3 + 5. I don’t know much about how bots work, but would that work too?

@Perchik – it isn’t as effective as a captcha, but it’s a lot better than nothing and if it doesn’t help, it doesn’t do any harm either :)

@Breefield – that will also work quite well (though also not as good as a real captcha). It has the advantage of being easier than good captcha, but compared to a reverse captcha it still requires the user to do something else than comment (i.e. calculate the answer) while a reverse captcha doesn’t require the user to do anything.