changing text inside label element using CSS

Question

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 <label for .. > field via CSS.

I know i can do it by placing duplicate copy of this snippet and use css to toggle. However, i want to do it minimum code change. May be using some CSS trick to change <label for..> text and not affecting the code inside <label for...> at all.

CSS is for styles HTML is for markup. Don't even try to do one with the other. — James Coyle, Mar 05 '13 at 01:28
Without being able to change the html, this would normally be done with JavaScript, not CSS. Is there a particular reason why you can't use JS? — Zoe, Mar 05 '13 at 01:31
Yes, i am not using JS, because the content is getting changed based on CSS3 media queries. — CodeMonkey, Mar 05 '13 at 01:34

score 12 · Accepted Answer · answered Mar 05 '13 at 01:31

12

You can't change text with CSS. The exception to this rule is the ::before and ::after psuedo-elements. In theory you could use classes to toggle the text like so:

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 you should. It's an accessibility nightmare, and can you imagine coming back later and trying to work out where the text is coming from if not from the HTML?

answered Mar 05 '13 at 01:31

Niet the Dark Absol

320,036
81
464
592

1

can you update the snippet with exact place of implementation – CodeMonkey Mar 05 '13 at 01:36
2

No, I'm sorry. I strongly discourage the use of this code. Since you're probably using JavaScript to toggle classes, just use it to change the text. – Niet the Dark Absol Mar 05 '13 at 01:37
no i am toggling classes using CSS by using block, overflow:hidden etc – CodeMonkey Mar 05 '13 at 01:40
@Niet the Dark Absol: may be that[using `content` property] is defamed as ugly solution but I see that it does lead to beautiful looking solutions..code gets simpler & easier to maintain – Rajat Gupta Dec 03 '13 at 22:20
@user01 I agree, when used correctly. For instance, `div.dropzone:empty::before {content:'Drag something here!';}` would be an example of good usage. – Niet the Dark Absol Dec 03 '13 at 22:38
what's really bad about the example that you listed in your answer ? Really I see no fault when it makes the code simpler other than the only fact it wont work with IE<8 .. – Rajat Gupta Dec 03 '13 at 22:45

score 6 · Answer 2 · answered Apr 23 '19 at 19:25

Following the example at https://blog.escapecreative.com/how-to-replace-text-with-css/, this is what worked for me:

label[for="donate-choice-14724"]{
    visibility: hidden;
    position: relative;
}
label[for="donate-choice-14724"]:after{
    visibility: visible;
    position: absolute;
    top: 0;
    left: 0;
    content:'Make this donation monthly';
}

score 2 · Answer 3 · edited May 23 '17 at 12:30

You can only change the content of :before and :after pseudoelements with CSS. Ali Bassam's answer below shows a 'hacky' way to display the pseudoelements content over the parent so that you can control it. Problems with this solution include, well, how hacky it seems and also the limited IE support of pseudo elements. But that might not be problematic for your project.

Another thing to consider is that you'd have limited control over the toggle with CSS. Your two options are media queries and the familiar pseudo classes. If your toggling needs go beyond what those guys can do, you'd do best turning to Javascript.

i know JS was option. But did not want to use that. – CodeMonkey Mar 05 '13 at 01:35 — CodeMonkey, Mar 05 '13 at 01:35

changing text inside label element using CSS

3 Answers3