171

このコードが期待どおりに機能しないという不幸な事実を克服するための良い方法は何ですか？

<div class="required">
    <label>Name:</label>
    <input type="text">
</div>

<style>
    .required input:after { content:"*"; }
</style>

完璧な世界では、必要なすべてinputのsに、フィールドが必要であることを示す小さなアスタリスクが表示されます。CSSは要素自体の後にではなく、要素のコンテンツの後に挿入されるため、この解決策は不可能ですが、そのようなものが理想的です。何千もの必須フィールドがあるサイトでは、入力の前にアスタリスクを1行（:afterto :before）に変更して移動するか、ラベルの最後（.required label:after）またはラベルの前に移動するか、または収納ボックスの位置など...

これは、アスタリスクをどこに配置するかについて考えが変わった場合だけでなく、フォームレイアウトでアスタリスクを標準の位置に配置できない奇妙な場合にも重要です。また、フォームをチェックしたり、不適切に完了したコントロールを強調表示したりする検証ともうまく機能します。

最後に、追加のマークアップは追加されません。

不可能なコードのすべてまたはほとんどの利点を備えた優れたソリューションはありますか？

4

19 に答える 19

310

それはあなたが念頭に置いていたことですか？

http://jsfiddle.net/erqrN/1/

<label class="required">Name:</label>
<input type="text">

<style>
  .required:after {
    content:" *";
    color: red;
  }
</style>


.required:after {
  content:" *";
  color: red;
}
<label class="required">Name:</label>
<input type="text">

https://developer.mozilla.org/en-US/docs/Web/CSS/pseudo-elementsを参照してください

于 2012-06-25T21:43:27.663 に答える
74 
.required label {
    font-weight: bold;
}
.required label:after {
    color: #e32;
    content: ' *';
    display:inline;
}

正確な構造をいじる: http://jsfiddle.net/bQ859/

于 2013-07-07T08:39:17.217 に答える
23

次の画像に示されているように、正確に INTO 入力に配置するには:

ここに画像の説明を入力

次のアプローチを見つけました。

.asterisk_input::after {
content:" *"; 
color: #e32;
position: absolute; 
margin: 0px 0px 0px -20px; 
font-size: xx-large; 
padding: 0 5px 0 0; }

 <form>
    <div>              
        <input type="text" size="15" />                                 
        <span class="asterisk_input">  </span>            
    </div>            
</form>

私が働いているサイトは固定レイアウトを使用してコーディングされているので、私にとっては問題ありませんでした。

液体のデザインに適しているかどうかはわかりません。

于 2014-05-30T21:34:46.133 に答える
12 
input[required], select[required] {
    background-image: url('/img/star.png');
    background-repeat: no-repeat;
    background-position-x: right;
}

選択ドロップダウン矢印と重ならないように、画像の右側に 20 ピクセルのスペースがあります

ここに画像の説明を入力

次のようになります。ここに画像の説明を入力

于 2014-09-08T04:47:34.537 に答える
5

これが効率的な方法だと思います。なぜそんなに頭痛がするのですか

    <div class="full-row">
     <label for="email-id">Email Address<span style="color:red">*</span></label>
  <input type="email" id="email-id" name="email-id"  ng-model="user.email" >
    </div>
于 2016-11-07T07:36:26.623 に答える
1 

.asterisc {
  display: block;
  color: red;
  margin: -19px 185px;
}
<input style="width:200px">
<span class="asterisc">*</span>

于 2016-02-26T12:00:37.807 に答える
-2

ここに行き着くが、jQueryを持っている人のために：

// javascript / jQuery
$("label.required").append('<span class="red-star"> *</span>')

// css
.red-star { color: red; }
于 2016-01-07T21:54:34.133 に答える