Aggiunta dell'asterisco ai campi richiesti in Bootstrap 3

166

Il mio HTML ha una classe chiamata .requiredassegnata ai campi obbligatori.

Ecco l'HTML:

<form action="/accounts/register/" method="post" role="form" class="form-horizontal">
    <input type='hidden' name='csrfmiddlewaretoken' value='brGfMU16YyyG2QEcpLqhb3Zh8AvkYkJt' />
    <div class="form-group required">
       <label class="col-md-2 control-label">Username</label>
       <div class="col-md-4">
         <input class="form-control" id="id_username" maxlength="30" name="username" placeholder="Username" required="required" title="" type="text" />
       </div>
    </div>
    <div class="form-group required"><label class="col-md-2 control-label">E-mail</label><div class="col-md-4"><input class="form-control" id="id_email" name="email" placeholder="E-mail" required="required" title="" type="email" /></div></div>
    <div class="form-group required"><label class="col-md-2 control-label">Password</label><div class="col-md-4"><input class="form-control" id="id_password1" name="password1" placeholder="Password" required="required" title="" type="password" /></div></div>
    <div class="form-group required"><label class="col-md-2 control-label">Password (again)</label><div class="col-md-4"><input class="form-control" id="id_password2" name="password2" placeholder="Password (again)" required="required" title="" type="password" /></div></div>
    <div class="form-group required"><label class="col-md-2 control-label">first name</label><div class="col-md-4"><input class="form-control" id="id_first_name" maxlength="30" name="first_name" placeholder="first name" required="required" title="" type="text" /></div></div>
    <div class="form-group required"><label class="col-md-2 control-label">last name</label><div class="col-md-4"><input class="form-control" id="id_last_name" maxlength="30" name="last_name" placeholder="last name" required="required" title="" type="text" /></div></div>
    <div class="form-group required"><label class="col-md-2 control-label">&#160;</label><div class="col-md-4"><div class="checkbox"><label><input class="" id="id_tos" name="tos" required="required" type="checkbox" /> I have read and agree to the Terms of Service</label></div></div></div>

    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
           <button type="submit" class="btn btn-primary">
              <span class="glyphicon glyphicon-star"></span> Sign Me Up!
           </button>
        </div>
    </div>
</form>

Ho aggiunto quanto segue al mio CSS;

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

Tuttavia, ciò non dà un rosso *attorno ai campi richiesti. Cosa mi sto perdendo qui? Non esiste un modo diretto in Bootstrap 3 per introdurre i *campi obbligatori?

MODIFICARE

I *termini e le condizioni non vengono visualizzati immediatamente in una casella di controllo. Come risolvere questo?

inserisci qui la descrizione dell'immagine

— tempesta di cervello
fonte

2

Si prega di contrassegnare la risposta alla domanda.

— LoveAndHappiness,

283

Utilizzare .form-group.requiredsenza spazio.

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

~~Modificare:~~

Per la casella di controllo puoi usare la pseudo classe: not (). Aggiungete il * richiesto dopo ogni etichetta a meno che non sia una casella di controllo

.form-group.required:not(.checkbox) .control-label:after, 
.form-group.required .text:after { /* change .text in whatever class of the text after the checkbox has */
   content:"*";
   color:red;
}

Nota: non testato

Dovresti usare la classe .text o indirizzarla altrimenti probabilmente, prova questo html:

<div class="form-group required">
   <label class="col-md-2 control-label">&#160;</label>
   <div class="col-md-4">
      <div class="checkbox">
         <label class='text'> <!-- use this class -->
            <input class="" id="id_tos" name="tos" required="required" type="checkbox" /> I have read and agree to the Terms of Service
         </label>
      </div>
   </div>
</div>

Ok terza modifica:

CSS torna a ciò che è stato

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

HTML:

<div class="form-group required">
   <label class="col-md-2">&#160;</label> <!-- remove class control-label -->
   <div class="col-md-4">
      <div class="checkbox">
         <label class='control-label'> <!-- use this class as the red * will be after control-label -->
            <input class="" id="id_tos" name="tos" required="required" type="checkbox" /> I have read and agree to the Terms of Service
         </label>
      </div>
   </div>
</div>

— Timvp
fonte

3

Ho provato quello modificato, ma non ha funzionato. puoi per favore controllare?

— tempesta di cervello il

Cambia qualcosa, anche nel CSS

— Timvp,

1

Sembra non essere BS3 generico, ma CSS personalizzato? Anche a me sembra reattivo, quindi forse va bene aggiungere questo (al tuo file di temi BS, ad esempio bootstrap-theme.css).

— Roland,

Per differenziare pseudo-classe e pseudo-elementi che puoi usare ::after. La speculazione CSS di livello 3 è fuori.

— Niyongabo,

73

Supponendo che questo sia l'aspetto dell'HTML

<div class="form-group required">
   <label class="col-md-2 control-label">E-mail</label>
   <div class="col-md-4"><input class="form-control" id="id_email" name="email" placeholder="E-mail" required="required" title="" type="email" /></div>
</div>

Per visualizzare un asterisco a destra dell'etichetta:

.form-group.required .control-label:after { 
    color: #d00;
    content: "*";
    position: absolute;
    margin-left: 8px;
    top:7px;
}

O a sinistra dell'etichetta:

.form-group.required .control-label:before{
   color: red;
   content: "*";
   position: absolute;
   margin-left: -15px;
}

Per creare un bel grande asterisco rosso puoi aggiungere queste righe:

font-family: 'Glyphicons Halflings';
font-weight: normal;
font-size: 14px;

O se stai usando Font Awesome aggiungi queste righe (e cambia la linea di contenuto):

font-family: 'FontAwesome';
font-weight: normal;
font-size: 14px;
content: "\f069";

— th3uiguy
fonte

1

top:7px;causerà i problemi se l'etichetta è multilinea. Sarebbe meglio sostituirlo con margin-top: -4px;per esempio.

— sasha_gud,

7

.form-group .required .control-label:afterdovrebbe probabilmente essere .form-group.required .control-label:after. La rimozione dello spazio tra .form-group e .required è il cambiamento.

— Jeremy Cook
fonte

Grazie! funziona anche con bootstrap 2.3 con .control-group.required .control-label:after { content:"*"; color:red; }

— edditor il

4

Le altre due risposte sono corrette. Quando includi spazi nei selettori CSS, stai prendendo di mira elementi figlio in questo modo:

.form-group .required {
    styles
}

Sta prendendo di mira un elemento con la classe di "richiesto" che si trova all'interno di un elemento con la classe di "gruppo-forma".

Senza lo spazio è indirizzato a un elemento che ha entrambe le classi. "richiesto" e "gruppo di moduli"

— Corey
fonte

Questo è un problema separato dalla tua domanda originale. Ma il tuo CSS sta facendo esattamente quello che gli stai dicendo. Sta mettendo l'asterisco con il campo etichetta (che per i tuoi termini e condizioni è vuoto) e non il campo di input. Se vuoi che appaiano insieme, dovrai raggrupparli nell'HTML. Ma poi hai un campo etichetta vuoto che è male. Vorrei solo abbandonare l'etichetta sui termini e le condizioni, ma mantenere le convalide.

— Corey,

1

Questo CSS ha funzionato per me:

.form-group.required.control-label:before{
   color: red;
   content: "*";
   position: absolute;
   margin-left: -10px;
}

e questo HTML:

<div class="form-group required control-label">
  <label for="emailField">Email</label>
  <input type="email" class="form-control" id="emailField" placeholder="Type Your Email Address Here" />
</div>

— tomahawk
fonte

È un po 'strano avere l'etichetta di controllo sul div che contiene sia l'etichetta che l'input.

— Devlin Carnate,