4

内のテキスト文字列の最後にアスタリスクを追加することは可能<label>ですか？

これは私が持っているものですが、アスタリスク（もちろん）はラベル全体の後ろに表示されます：

<label class="xy-form-label-required" for="zipcode">
   Zip Code
   <span class="xy-form-labelinfo">
       Allowed characters a-z A-z 0-9 ,.-
       Could also be an information about the field...
   </span>
</label>

私のCSSコード：

form.xy-form .xy-form-label-required:after {
    color: grey;
    content: ' *';
}

結果は次のとおりです。

郵便番号
許可される文字azAz0-9、.-
*

これは、htmlマークアップを変更せずに達成したいことです。

郵便番号*
許可される文字azAz0-9、.-

4

4 に答える 4

5

代わりに次のCSSコードを追加するだけです

.xy-form-label-required > span.xy-form-labelinfo:before{
  color: grey;
  content: " *";
}
于 2013-01-11T13:10:09.510 に答える
2

タイプミスは別として、情報ラベルの前にアスタリスクが必要です。

.xy-form-label-required .xy-form-labelinfo:before{
    color: grey;
    content: ' *';
}
于 2013-01-11T13:09:16.587 に答える
2

私はそのようにマークアップを変更しなければならなかったので、<セレクター（まだ利用できません）なしでは私が望むものを達成することはできません：

<label class="xy-form-label" for="zipcode">
    <span class="mc-form-asterisk>Zip Code</span>
    <span class="xy-form-labelinfo">
        Allowed characters a-z A-z 0-9 ,.-
        Could also be an information about the field...
    </span>
</label>

私のCSSコード：

form.xy-form .xy-form-label .xy-form-asterisk:after,
form.xy-form .xy-form-label-required:after {
    display: inline-block;
    color: grey;
    content: '\a0*';
}

それでもそれほど悪くはないと思います。それにもかかわらず、あなたのアドバイスの人に感謝します！

于 2013-01-16T13:55:18.077 に答える
0

テキストノードではなく、要素の後にアステリックスを追加しています。あなたが望む効果を達成するために、あなたはjavascript、すなわちこのようなものを使う必要があるでしょう：http: //jsbin.com/udiroz/2/edit しかし、私はこのようには行きません。

あなたのケースでこれが可能かどうかはわかりませんが、マークアップを次のようなものに変更することをお勧めします：http: //jsbin.com/udiroz/1/edit 私の意見では、ラベルは次のような追加情報の場所としては適していません。許可される文字、許可されない文字、検証エラーなど。

于 2013-01-11T13:53:58.087 に答える