Question

我有一个代码段：

<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>

我想通过CSS更改<label for .. >字段中的文字。

我知道我可以通过放置此代码段的副本并使用css进行切换来实现。但是，我想做最小的代码更改。可能正在使用一些CSS技巧来更改<label for..>文本，而不会影响<label for...>内的代码。

Answer 1

您无法使用CSS更改文字。此规则的例外是::before和::after伪元素。从理论上讲，您可以使用类来切换文本，如下所示：

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

然而，仅仅因为你并不意味着你应该。这是一个可访问性的噩梦，你能想象以后回来并尝试找出文本来自哪里，如果不是来自HTML？

Answer 2

你可以使用only change the content：之前和之后使用CSS进行伪元素。下面的Ali Bassam的答案显示了一种“hacky”方式，可以显示父元素的伪元素内容，以便您可以控制它。这个解决方案的问题包括它看起来有多酷，还有the limited IE support伪元素。但这可能不会对您的项目造成问题。

要考虑的另一件事是你对CSS的切换控制有限。您的两个选项是media queries和熟悉的pseudo classes。如果您的切换需求超出了这些人的能力，那么您最好turning to Javascript.

Answer 3

按照https://blog.escapecreative.com/how-to-replace-text-with-css/上的示例，这对我有用：

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

使用CSS更改标签元素内的文本

3 个答案: