Verwenden Sie CSS, um automatisch ein Sternchen "Erforderliches Feld" hinzuzufügen, um Eingaben zu bilden

Was ist ein guter Weg, um die unglückliche Tatsache zu überwinden, dass dieser Code nicht wie gewünscht funktioniert:

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

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

In einer perfekten Welt würden alle erforderlichen inputs das kleine Sternchen erhalten, das angibt, dass das Feld erforderlich ist. Diese Lösung ist unmöglich, da das CSS nach dem Elementinhalt eingefügt wird, nicht nach dem Element selbst, sondern so etwas wie ideal. Auf einer Site mit Tausenden von erforderlichen Feldern kann ich das Sternchen vor der Eingabe mit einer Änderung in eine Zeile ( :afternach :before) oder an das Ende des Etiketts ( .required label:after) oder vor das Etikett oder nach verschieben eine Position auf der enthaltenen Box, etc ...

Dies ist nicht nur wichtig, wenn ich es mir anders überlege, wo das Sternchen überall platziert werden soll, sondern auch in ungeraden Fällen, in denen das Formularlayout das Sternchen nicht an der Standardposition zulässt. Es funktioniert auch gut mit der Validierung, die das Formular überprüft oder nicht ordnungsgemäß ausgefüllte Steuerelemente hervorhebt.

Schließlich werden keine zusätzlichen Markups hinzugefügt.

Gibt es gute Lösungen, die alle oder die meisten Vorteile des unmöglichen Codes bieten?

Hast du das gedacht?

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

Siehe https://developer.mozilla.org/en-US/docs/Web/CSS/pseudo-elements

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

Spielen Sie mit Ihrer genauen Struktur: http://jsfiddle.net/bQ859/

Obwohl dies die akzeptierte Antwort ist, ignorieren Sie mich bitte und verwenden Sie die :afterunten vorgeschlagene Syntax. Meine Lösung ist nicht zugänglich.

Ein ähnliches Ergebnis könnte erzielt werden, indem ein Hintergrundbild eines Sternchenbildes verwendet und der Hintergrund des Etiketts / der Eingabe / des äußeren Divs und ein Auffüllen der Größe des Sternchenbildes festgelegt werden. Etwas wie das:

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

Dadurch wird das Sternchen IN das Textfeld eingefügt, aber das Anbringen des gleichen div.requiredanstelle von .required inputwird wahrscheinlich mehr das sein, wonach Sie suchen, wenn auch etwas weniger elegant.

Diese Methode erfordert keine zusätzliche Eingabe.

Um es genau in die Eingabe zu setzen, wie es auf dem folgenden Bild gezeigt wird:

Ich habe folgenden Ansatz gefunden:

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

Die Site, an der ich arbeite, ist mit einem festen Layout codiert, daher war es für mich in Ordnung.

Ich bin mir nicht sicher, ob es gut für flüssiges Design ist.

Schreiben Sie in CSS

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

und 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;
}

Das Bild hat rechts einen Abstand von 20 Pixel, um sich nicht mit dem Dropdown-Pfeil zu überlappen

Und es sieht so aus:

Verwenden Sie jQuery und 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>

Ich denke, das ist der effiziente Weg, warum so viel Kopfschmerzen

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

Es ist 2019 und frühere Antworten auf dieses Problem werden nicht verwendet

1. CSS-Raster
2. CSS-Variablen
3. HTML5-Formularelemente
4. SVG in CSS

Das CSS-Raster ist die Möglichkeit, Formulare im Jahr 2019 zu erstellen, da Ihre Beschriftungen Ihren Eingaben vorausgehen können, ohne dass zusätzliche Divs, Bereiche, Bereiche mit Sternchen und andere Relikte vorhanden sind.

Hier ist, wohin wir mit minimalem CSS gehen:

Der HTML-Code für die oben genannten:

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

Platzhaltertext kann ebenfalls hinzugefügt werden und wird dringend empfohlen. (Ich beantworte nur diese Zwischenform).

Nun zu den CSS-Variablen:

--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>');

Das CSS für die Formularelemente:

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);
}

Das Formular selbst sollte sich im CSS-Raster befinden:

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

Die Werte für die Spalten können auf 1fr autooder 1frmit <p>Tags festgelegt werden, die auf 1 / -1 festgelegt sind. Sie ändern die Variablen in Ihren Medienabfragen so, dass die Eingabefelder auf Mobilgeräten und wie oben auf dem Desktop in voller Breite angezeigt werden. Sie können Ihre Rasterlücke auch auf Mobilgeräten ändern, wenn Sie dies mit dem CSS-Variablenansatz wünschen.

Wenn die Kästchen gültig sind, sollten Sie anstelle des Sterns ein grünes Häkchen erhalten.

Die SVG in CSS ist eine Möglichkeit, den Browser vor einem Roundtrip zum Server zu bewahren, um ein Bild des Sternchens zu erhalten. Auf diese Weise können Sie die Sternchen fein einstellen. Die Beispiele hier befinden sich in einem ungewöhnlichen Winkel. Sie können dies herausarbeiten, da das SVG-Symbol oben vollständig lesbar ist. Das Ansichtsfeld kann auch geändert werden, um das Sternchen über oder unter der Mitte zu platzieren.

In diesem Beispiel wird ein Sternchen vor eine Beschriftung gesetzt, um diese bestimmte Eingabe als erforderliches Feld zu kennzeichnen. Ich habe die CSS-Eigenschaften mit% und em festgelegt, um sicherzustellen, dass meine Webseite reagiert. Sie können px oder andere absolute Einheiten verwenden, wenn Sie möchten.

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

Was Sie brauchen, ist: Erforderlicher Selektor - Er wählt alle Felder mit dem Attribut 'Erforderlich' aus (daher müssen keine zusätzlichen Klassen hinzugefügt werden). Dann - Stil Eingaben nach Ihren Bedürfnissen. Sie können den Selektor ': after' verwenden und ein Sternchen hinzufügen, wie unter anderen Antworten vorgeschlagen

Sie können das gewünschte Ergebnis erzielen, indem Sie den HTML-Code in ein div-Tag einkapseln, das die Klasse "required" gefolgt von der Klasse "form-group" enthält. * Dies funktioniert jedoch nur, wenn Sie über Bootstrap verfügen.

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

Für diejenigen, die hier landen, aber jQuery haben:

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

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