7

プレースホルダーでアスタリスクのスタイルを設定する方法を探しています。

プレースホルダーのこのようなプレーンテキストは私を満足させません:

あなたの電子メール*

プレースホルダーのテキストは可変であるため、静的な背景ではうまくいかないことに注意してください。

4

4 に答える 4

13

:after動作しますが、入力要素ではなくプレースホルダーをターゲットにする必要があります...そして、プロパティを使用position: absolute;してtop, left、好きな*場所に移動できます...

デモ(他の構文についてはわかりませんが、Firefox < 17 を使用して Webkit でテストしたので、ブラウザで何かが失敗した場合はお知らせください)

HTML

<input type="text" placeholder="E-Mail" />

CSS

::-webkit-input-placeholder:after {
   content: '*';
}

:-moz-placeholder:after { /* Firefox 18- */
   content: '*'; 
}

::-moz-placeholder:after {  /* Firefox 19+ */
   content: '*';
}

:-ms-input-placeholder:after {  
   content: '*';
}
于 2013-02-14T16:12:04.783 に答える
2

これでうまくいくはずです。ここに移動して、プレースホルダーに追加する HTML エンティティを見つけることができます。head に文字セット UTF-8 を使用するメタ タグがあることを確認してください。

<head>
    <meta charset="utf-8">
</head>

<input type="text" id="email" class="form-control input-lg formData" placeholder="Your Email&#42;"/>
于 2016-09-28T04:53:49.940 に答える
1

より良い方法は、フォールバックとしてアスタリスクをプレースホルダーに保持することです。これは Webkit ブラウザーでのみ機能するためです。したがって、他のブラウザの場合、ユーザーはどのフィールドが必須かわかりません。

次に、別の問題に直面しています-プレースホルダーに2つのアスタリスク。これは、javascript によって非常に簡単に修正できます。

これについて記事を書きました: http://d.pr/1zQu

于 2015-03-06T19:41:13.967 に答える
0

私が見つけた最も簡単な方法は、入力フィールドに背景画像を与えることでした:

<!DOCTYPE html>
<html>
  <head>
    <style>
      input.mandatory {
        padding: 2px;
        height: 30px;
        width: 200px;
        background-image: url("http://www.fileformat.info/info/unicode/char/002a/asterisk.png");
        background-position: 160px -10px;
        background-repeat: no-repeat;
        background-size: 30%;
      }
      </style>
  </head>
  <body>
    <input class='mandatory' type='text' placeholder='Username'>
  </body>
</html>

https://jsfiddle.net/t7jnyqos/18/

于 2018-08-27T14:56:56.080 に答える