CSSを使用して「必須フィールド」のアスタリスクを自動的に追加して入力を形成する

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

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

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

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

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

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

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

それはあなたが考えていたものですか？

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を参照してください

.required label {
    font-weight: bold;
}
.required label:after {
    color: #e32;
    content: ' *';
    display:inline;
}

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

これは受け入れられる回答ですが、私を無視して、:after以下に提案する構文を使用してください。私のソリューションにアクセスできません。

アスタリスクの画像の背景画像を使用し、ラベル/入力/外部divの背景とアスタリスク画像のサイズのパディングを設定することで、同様の結果を得ることができます。このようなもの：

.required input {
   padding-right: 25px;
   background-image: url(...);
   background-position: right top;
}

これにより、テキストボックスの内側にアスタリスクが表示されますが、div.required代わりに同じ.required inputものを配置すると、エレガントさがやや低下します。

このメソッドは、追加の入力を必要としません。

次の図に示すように、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> 

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

リキッドデザインに適しているかどうかはわかりません。

CSSで書く

.form-group.required .control-label:after {content:"*";color:red;}

およびHTML

<div class="form-group required">

    <label class="control-label">Name:</label>

    <input type="text">

</div>

input[required]{
    background-image: radial-gradient(#F00 15%, transparent 16%), radial-gradient(#F00 15%, transparent 16%);
    background-size: 1em 1em;
    background-position: right top;
    background-repeat: no-repeat;
}

input[required], select[required] {
    background-image: url('/img/star.png');
    background-repeat: no-repeat;
    background-position-x: right;
}

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

そしてそれはこのように見えます：

jQueryとCSSを使用する

jQuery(document).ready(function() {
 jQuery("[required]").after("<span class='required'>*</span>");
});

.required {
    position: absolute;
    margin-left: -10px;
    color: #FB0000;
    font-size: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" value="xxx" required>

これは効率的な方法だと思います

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

それは2019年であり、この問題に対する以前の回答は使用していません

1. CSSグリッド
2. CSS変数
3. HTML5フォーム要素
4. CSSのSVG

CSSグリッドは、追加のdiv、span、アスタリスクが付いたスパンなどの遺物なしでラベルを入力の前に置くことができるため、2019年にフォームを作成する方法です。

これが、最小限のCSSを使用するところです。

上記のHTML：

<form action="https://www.example.com/register/" method="post" id="form-validate" enctype="multipart/form-data">
    <p class="form-instructions">Please enter the following information to create your account.</p>
    <label for="firstname">First name</label>
    <input type="text" id="firstname" name="firstname" value="" title="First name" maxlength="255" required="">
    <label for="lastname">Last name</label>
    <input type="text" id="lastname" name="lastname" value="" title="Last name" maxlength="255" required="">
    <label for="email_address">Email address</label>
    <input type="email" autocapitalize="off" autocorrect="off" spellcheck="false" name="email" id="email_address" value="" title="Email address" size="30" required="">
    <label for="password">Password</label>
    <input type="password" name="password" id="password" title="Password" required="">
    <label for="confirmation">Confirm password</label>
    <input type="password" name="confirmation" title="Confirm password" id="confirmation" required="">
    <input type="checkbox" name="is_subscribed" title="Subscribe to our newsletter" value="1" id="is_subscribed" class="checkbox">
    <label for="is_subscribed">Subscribe to the newsletter</label>
    <input type="checkbox" name="persistent_remember_me" id="remember_meGCJiRe0GbJ" checked="checked" title="Remember me">
    <label for="remember_meGCJiRe0GbJ">Remember me</label>
    <p class="required">* Required</p>
    <button type="submit" title="Register">Register</button>
</form>

プレースホルダーテキストも追加できるため、強くお勧めします。（私はこの中間形式に答えているだけです）。

次にCSS変数について：

--icon-required: url('data:image/svg+xml,\
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="-10 -6 16 16"> \
  <line id="line" y1="-3" y2="3" stroke="%23df0000" stroke-linecap="butt" transform="rotate(15)"></line> \
  <line id="line" y1="-3" y2="3" stroke="%23df0000" stroke-linecap="butt" transform="rotate(75)"></line> \
  <line id="line" y1="-3" y2="3" stroke="%23df0000" stroke-linecap="butt" transform="rotate(-45)"></line> \
</svg>');

--icon-tick: url('data:image/svg+xml,\
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100" viewBox="-2 -2 16 16"> \
            <path fill="green" stroke-linejoin="round" d="M2 6L1 7l3 4 7-10h-1L4 8z"/> \
</svg>');

フォーム要素のCSS：

input[type=text][required],
input[type=email][required],
input[type=password][required],
input[type=tel][required] {
    background-image: var(--icon-required);
    background-position-x: right;
    background-repeat: no-repeat;
    background-size: contain;
}

input:valid {
    --icon-required: var(--icon-tick);
}

フォーム自体はCSSグリッドにある必要があります。

form {
    align-items: center;
    display: grid;
    grid-gap: var(--form-grid-gap);
    grid-template-columns: var(--form-grid-template-columns);
    margin: auto;
}

列の値をに設定することができる1fr autoか、1frといったもので<p>スパン1 / -1のフォームのセット内のタグ。メディアクエリの変数を変更して、モバイルでは入力ボックスが全幅になり、デスクトップでは上記のようになるようにします。CSS変数アプローチを使用して、必要に応じてモバイルのグリッドギャップを変更することもできます。

ボックスが有効な場合、アスタリスクの代わりに緑色のチェックマークが表示されます。

CSSのSVGは、アスタリスクの画像を取得するためにブラウザーがサーバーに往復する必要をなくす方法です。このようにして、アスタリスクを微調整できます。ここでの例は異常な角度にあります。上のSVGアイコンが完全に読みやすいので、これを編集できます。ビューボックスを修正して、アスタリスクを中心の上または下に配置することもできます。

この例では、ラベルの前にアスタリスク記号を付けて、その特定の入力を必須フィールドとして示しています。％とemを使用してCSSプロパティを設定し、Webページが応答するようにします。必要に応じて、pxまたはその他の絶対単位を使用できます。

#name {
   display: inline-block;
   margin-left: 40%;
   font-size:25px;
    
}
.nameinput{
   margin-left: 10px;
   font-size:90%;
   width: 17em;
   
}

.nameinput::placeholder {
  font-size: 0.7em;
  vertical-align: middle;
}

#name p{
   margin:0;
   border:0;
   padding:0;
   display:inline-block;
   font-size: 40%;
   vertical-align: super;
}

<label id="name" value="name">
<p>*</p> 
Name:  <input class="nameinput" type="text" placeholder="Enter your name" required>
</label>

必要なものは：requiredセレクターです-'required'属性を持つすべてのフィールドを選択します（クラスを追加する必要はありません）。次に-必要に応じて入力をスタイルします。'：after'セレクターを使用して、他の回答の中で提案されている方法でアスタリスクを追加できます

HTMLコードを「必須」クラスとその後に続く「フォームグループ」クラスを含むdivタグでカプセル化することにより、望ましい結果を得ることができます。

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

ここで終わるがjQueryを持っている人のために：

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

// css
.red-star { color: red; }