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疑似要素のコンテンツのみです。以下のAliBassamの回答は、親の上に疑似要素のコンテンツを表示して、それを制御できるようにする「ハッキー」な方法を示しています。このソリューションの問題には、まあ、それがいかにハッキーに見えるか、そして疑似要素の制限されたIEサポートも含まれます。しかし、それはあなたのプロジェクトにとって問題ではないかもしれません。

考慮すべきもう1つのことは、CSSを使用したトグルの制御が制限されていることです。2つのオプションは、メディアクエリとおなじみの疑似クラスです。トグルのニーズがそれらの人ができることを超えている場合は、Javascriptに目を向けるのが最善です。

于 2013-03-05T01:32:39.117 に答える