Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

CSS Spoiler tag



1:21 pm on Jan 19, 2013 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

Is there any way to blur text so indicate it's a spoiler, using CSS, that will display the same across major browsers?
This is what I'm using:

.spoiler {
display: inline-block;
text-decoration: none;
color: transparent;
text-shadow: 0px 0px 5px #000000;
text-shadow: 0px 0px 0px #000000;

It looks right in FF, but in IE and on my mobile phone all I get is blank white spaces, which only displays the text on highlighting.

What I'm not sure is if CSS is the right solution. It ought to be, but it's just so inconsistent in its implementation.


9:30 pm on Jan 19, 2013 (gmt 0)

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month

The first thing that jumped out at me was {color: transparent;}. In CSS2 this wasn't allowed (only backgrounds could be transparent) even though it works in most browsers and is fine in 3. See what happens if you comment-out this line.

The second thing to jump out was :hover. Techically this group of pseudo-classes only work with interactive elements-- things like <a> that do something when you click on them. This doesn't seem to have changed between 2 and 3. What kind of element will the "spoiler" class be attached to?

Of course there's the javascript option, but then you lose the users with scripting turned off.

:: detour to w3c ::

Oh joy, CSS3 has added a "currentColor" keyword. This will be a big help. (Sorry. Nothing to do with your question, but had to spread the word. Now, if only someone could find the single page that links to all current CSS3 drafts...)


10:44 pm on Jan 19, 2013 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

Microsoft only added text-shadow starting with IE10. IE is always years behind any other browser.


12:06 pm on Jan 20, 2013 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

Thanks Lucy and Dr Howard. I'm thinking of putting it in a <span>. I tried the anchor tag and commenting out the [color: transparent], but no joy on both counts.

I guess that leaves Javascript, or detecting the browser and serving up something different according to what's being used. Either way, yuck.

Featured Threads

Hot Threads This Week

Hot Threads This Month