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
– James Coyle, Commented Mar 5, 2013 at 1: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
– Zoe, Commented Mar 5, 2013 at 1:31
Yes, i am not using JS, because the content is getting changed based on CSS3 media queries. — CodeMonkey
– CodeMonkey, Commented Mar 5, 2013 at 1:34

Niet the Dark Absol · Accepted Answer · 2013-03-05 01:31:09Z

13

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 5, 2013 at 1:31

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

CodeMonkey Over a year ago

can you update the snippet with exact place of implementation

Niet the Dark Absol Over a year ago

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.

CodeMonkey Over a year ago

no i am toggling classes using CSS by using block, overflow:hidden etc

Rajat Gupta Over a year ago

@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

Niet the Dark Absol Over a year ago

@user01 I agree, when used correctly. For instance, div.dropzone:empty::before {content:'Drag something here!';} would be an example of good usage.

|

Jaime Montoya · Accepted Answer · 2019-04-23 19:25:38Z

7

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';
}

answered Apr 23, 2019 at 19:25

Jaime Montoya

7,83318 gold badges81 silver badges122 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:30:50Z

2

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.

edited May 23, 2017 at 12:30

CommunityBot

11 silver badge

answered Mar 5, 2013 at 1:32

jamesplease

12.9k6 gold badges51 silver badges77 bronze badges

1 Comment

CodeMonkey Over a year ago

i know JS was option. But did not want to use that.

Collectives™ on Stack Overflow

changing text inside label element using CSS

3 Answers 3

6 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related