changing text inside label element using CSS

change text of span with css
javascript change label text
html label text change
css change text of anchor
css replace text with icon
javascript change label text by id
how to set label value in javascript dynamically
change text on click 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 <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.

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?

How can I replace text with CSS?, 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. I added the CSS to make the input fields appear as you see in the image (or on the example page). I made the labels display as block level elements, which were floated to the left. Then I assigned a width to the labels so that the input fields would all be a uniform distance away from the labels. I assigned a color and made the text bold.

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.

changing text inside label element using CSS, It's a common need in web apps: you click something and the text of the thing you just a pseudo element covering the old word and replacing it with the swap word. This means the word needs to be in a label as well, which is able to toggle the text initially inside whatever HTML tag i'm using, then when needed use  With all that difficult floating safely out of the way, aligning the input labels to the right is a breeze; simply set the text alignment on the label elements to achieve a form that looks like

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

Swapping Out Text, Five Different Ways, Use the innerHTML property to change the text inside the label. The innerHTML property sets or returns the HTML content of an element. Example 1: This example  Create a label element and assign an id to that element. Define a button that is used to call a function. It acts as a switch to change the text in the label element. Define a javaScript function, that will update the label text. Use the innerHTML property to change the text inside the label.

How to change the text of a label using JavaScript ?, The HTML label element represents a caption for an item in a user interface. Alternatively, you can nest the <input> directly inside the <label> , in which If the label's text needs to be adjusted visually, use CSS classes  Replacing a text is mostly worked out on the server side. But in some circumstances, where we don’t have control over the server, or we are working under restrictions, replacing text using CSS may be a choice. Method 1: Using Pseudo Elements and Visibility Modifier with Absolute Positioning To start with, we wrap the text and assign it a class.

<label>, Position Text Labels on Forms Using CSS As our form elements/labels are inside ordered list items (which are block elements), each pair It's a simple change, but one which makes the form much neater, as shown below. Replacing text with CSS is not something I use often, but there are some specific cases where it comes in handy. If you have the ability to change text on the server-side, I always recommend that first. CSS text replacement should be a last resort, as that is not what CSS is intended for.

Position Text Labels on Forms Using CSS, This technique is sufficient for Success Criteria 1.1.1, 1.3.1 and 4.1.2 whether or not the label element is visible. That is, it may be hidden using CSS. However  .item a p.new-label span:after{ position: relative; content: 'NEW' } .item:hover a p.new-label span:after { content: 'ADD'; } The CSS :after pseudo-element matches a virtual last child of the selected element. Typically used to add cosmetic content to an element, by using the content CSS property. This element is inline by default.

Comments
  • CSS is for styles HTML is for markup. Don't even try to do one with the other.
  • 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?
  • Yes, i am not using JS, because the content is getting changed based on CSS3 media queries.
  • can you update the snippet with exact place of implementation
  • 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.
  • no i am toggling classes using CSS by using block, overflow:hidden etc
  • @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
  • @user01 I agree, when used correctly. For instance, div.dropzone:empty::before {content:'Drag something here!';} would be an example of good usage.
  • i know JS was option. But did not want to use that.