11

我有一个代码片段：

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

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

我知道我可以通过放置此片段的副本并使用 css 切换来做到这一点。但是，我想做最少的代码更改。可能正在使用一些 CSS 技巧来更改<label for..>文本，而根本不影响内部代码<label for...>。

4

3 回答 3

12

您不能使用 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）吗？

于 2013-03-05T01:31:09.210 回答
4

按照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';
}
于 2019-04-23T19:25:38.033 回答
2

您只能使用 CSS 更改:before 和 :after 伪元素的内容。Ali Bassam 在下面的回答显示了一种在父级上显示伪元素内容的“hacky”方式，以便您可以控制它。这个解决方案的问题包括，它看起来多么老套，以及IE对伪元素的支持有限。但这对您的项目可能没有问题。

要考虑的另一件事是，您对 CSS 切换的控制有限。您的两个选项是媒体查询和熟悉的伪类。如果您的切换需求超出了这些人的能力范围，那么您最好转向 Javascript。

于 2013-03-05T01:32:39.117 回答