Geek Answers Handbook

Change text inside label element using CSS

I have a code snippet:

<fieldset class="shareMe"><br /> <input type="checkbox" id="share_me" name="share_me" value="1" {if $default_share_pref}checked="checked"{/if} onclick="if (this.checked) { var perms = 'publish_stream'; fb_login_cached(function(response){ if (!response.perms.match(new RegExp(perms))) $('share_me').checked = false; }, perms); }"/> <label for="share_me">Post this question to my friends on <span class=""> <a class="fb_button fb_button_small"> <span class="fb_button_text">Facebook</span> </a> </span>. </label> </fieldset>

I want to change the text in the <label for .. > field using CSS.

I know I can do this by posting a duplicate of this snippet and using css to switch. However, I want to do this with minimal code change. A CSS trick can be used to change the text of <label for..> and not affect the code inside <label for...> .

+6
source share
2 answers

You cannot change text with CSS. The exceptions to this rule are ::before and ::after psuedo-elements. Theoretically, you can use classes to switch text as follows:

 label[for="share_me"]:before{content:'Post this question to my friends on '} label[for="share_me"].othertext:before{content:'Some other text!'}

However, just because you can doesn’t mean what you need. This is a nightmare of accessibility, and can you imagine how to come back later and try to figure out where the text comes from, if not from HTML?

+5
source

You can change the content : before and: after pseudo-elements using CSS. Ali Bassam, below, shows a “hacker” way of displaying the contents of pseudo-elements over a parent so that you can control it. Problems with this solution include, well, what the hacks look like, as well as limited support for IE pseudo-elements. But this can be problematic for your project.

Another thing to keep in mind is that you will have limited control over switching using CSS. Your two options: media queries and familiar pseudo-classes . If your conversion needs exceed what these guys can do, you would be better off turning to Javascript.

+2
source

More articles:


All Articles