Usa CSS per aggiungere automaticamente l'asterisco 'campo obbligatorio' per formare input

Qual è un buon modo per superare il fatto spiacevole che questo codice non funzionerà come desiderato:

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

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

In un mondo perfetto, tutti i messaggi richiesti inputotterrebbero il piccolo asterisco che indica che il campo è obbligatorio. Questa soluzione impossibile poiché il CSS è inserito dopo il contenuto dell'elemento, non dopo l'elemento stesso, ma qualcosa del genere sarebbe l'ideale. In un sito con migliaia di campi obbligatori, posso spostare l'asterisco davanti all'input con una modifica su una riga ( :aftera :before) oppure spostarlo alla fine dell'etichetta ( .required label:after) o davanti all'etichetta, oppure su una posizione sulla scatola di contenimento, ecc ...

Questo è importante non solo nel caso in cui cambi idea su dove posizionare l'asterisco ovunque, ma anche per i casi strani in cui il layout del modulo non consente l'asterisco nella posizione standard. Funziona bene anche con la convalida che controlla il modulo o evidenzia i controlli completati in modo errato.

Infine, non aggiunge markup aggiuntivo.

Esistono buone soluzioni che presentano tutti o la maggior parte dei vantaggi del codice impossibile?

È quello che avevi in ​​mente?

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

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

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

Gioca con la tua struttura esatta: http://jsfiddle.net/bQ859/

Sebbene questa sia la risposta accettata, ti prego di ignorarmi e utilizzare la :aftersintassi suggerita di seguito. La mia soluzione non è accessibile.

Un risultato simile potrebbe essere ottenuto utilizzando un'immagine di sfondo di un'immagine di un asterisco e impostando lo sfondo dell'etichetta / input / div esterno e un'imbottitura delle dimensioni dell'immagine dell'asterisco. Qualcosa come questo:

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

Questo metterà l'asterisco ALL'INTERNO della casella di testo, ma indossare lo stesso div.requiredinvece di .required inputprobabilmente sarà più quello che stai cercando, se un po 'meno elegante.

Questo metodo non richiede un input aggiuntivo.

Per metterlo esattamente INTO come mostrato nella seguente immagine:

Ho trovato il seguente approccio:

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

Il sito su cui lavoro è codificato utilizzando un layout fisso, quindi per me è stato ok.

Non sono sicuro che sia buono per il design liquido.

scrivere in CSS

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

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

L'immagine ha uno spazio di 20 pixel a destra per non sovrapporsi con la freccia a discesa selezionata

E sembra così:

Usa jQuery e 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>

Penso che questo sia il modo efficace di fare, perché così tanto mal di testa

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

È il 2019 e le precedenti risposte a questo problema non vengono utilizzate

1. Griglia CSS
2. Variabili CSS
3. Elementi del modulo HTML5
4. SVG in CSS

La griglia CSS è il modo di creare moduli nel 2019 poiché puoi avere le etichette che precedono i tuoi input senza avere div, span, span extra con asterischi e altre reliquie.

Ecco dove stiamo andando con CSS minimo:

L'HTML per quanto sopra:

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

Anche il testo segnaposto può essere aggiunto ed è altamente raccomandato. (Sto solo rispondendo a questo modulo intermedio).

Ora per le variabili 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>');

Il CSS per gli elementi del modulo:

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

Il modulo stesso dovrebbe essere nella griglia CSS:

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

I valori per le colonne possono essere impostati su 1fr autoo 1frcon qualsiasi cosa come<p> tag nel modulo impostato su 1 / -1. Modifichi le variabili nelle tue query multimediali in modo da avere le caselle di input che vanno a tutta larghezza su dispositivi mobili e come sopra sul desktop. Se lo desideri, puoi anche modificare il gap della griglia sul dispositivo mobile utilizzando l'approccio delle variabili CSS.

Quando le caselle sono valide, dovresti ottenere un segno di spunta verde invece dell'asterisco.

SVG in CSS è un modo per salvare il browser dal dover fare un giro sul server per ottenere un'immagine dell'asterisco. In questo modo puoi mettere a punto gli asterischi, gli esempi qui sono in un angolo insolito, puoi modificarlo come l'icona SVG sopra è interamente leggibile. La viewbox può anche essere modificata per posizionare l'asterisco sopra o sotto il centro.

Questo esempio mette un simbolo asterisco davanti a un'etichetta per indicare quel particolare input come campo obbligatorio. Ho impostato le proprietà CSS usando% ed em per assicurarsi che la mia pagina web sia reattiva. Puoi usare px o altre unità assolute se vuoi.

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

Ciò di cui hai bisogno è: selettore richiesto: selezionerà tutti i campi con l'attributo 'obbligatorio' (quindi non è necessario aggiungere ulteriori classi). Quindi, imposta gli input in base alle tue esigenze. Puoi usare il selettore ': after' e aggiungere un asterisco nel modo suggerito tra le altre risposte

È possibile ottenere il risultato desiderato incapsulando il codice HTML in un tag div che contiene la classe "obbligatoria" seguita dalla classe "gruppo di form". * Tuttavia, questo funziona solo se si dispone di Bootstrap.

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

Per coloro che finiscono qui, ma hanno jQuery:

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

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