Ajout d'un astérisque aux champs obligatoires dans Bootstrap 3

166

Mon HTML a une classe appelée .requiredqui est assignée aux champs obligatoires.

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

J'ai ajouté ce qui suit à mon CSS;

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

Cela ne donne toujours pas un rouge *autour des champs obligatoires. Qu'est-ce que j'oublie ici? N'existe-t-il pas un moyen direct dans Bootstrap 3 d'introduire *les champs obligatoires?


ÉDITER

Les *conditions générales n'apparaissent pas immédiatement dans une case à cocher. Comment régler ceci?

entrez la description de l'image ici

idée de génie
la source
2
Veuillez marquer la question répondue.
LoveAndHappiness

Réponses:

284

Utilisez .form-group.requiredsans espace.

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

Éditer:

Pour la case à cocher, vous pouvez utiliser la pseudo classe: not (). Vous ajoutez le * requis après chaque étiquette sauf s'il s'agit d'une case à cocher

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

Remarque: non testé

Vous devriez utiliser la classe .text ou la cibler sinon probablement, essayez ce 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 troisième édition:

CSS retour à ce qui était

.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
la source
3
J'ai essayé celui édité, mais cela n'a pas fonctionné. Peux tu vérifier s'il te plaît?
brain storm
Changer quelque chose, également dans le CSS
Timvp
1
Semble ne pas être BS3 générique, mais CSS personnalisé? Il me semble également réactif, alors peut-être que vous pouvez l'ajouter (à votre fichier de thème BS, par exemple bootstrap-theme.css).
Roland le
Pour différencier la pseudo-classe et les pseudo-éléments, vous pouvez utiliser ::after. La spéculation CSS de niveau 3 est sortie.
Niyongabo
73

En supposant que c'est à quoi ressemble le 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>

Pour afficher un astérisque à droite de l'étiquette:

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

Ou à gauche de l'étiquette:

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

Pour faire de beaux gros astérisques rouges, vous pouvez ajouter ces lignes:

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

Ou si vous utilisez Font Awesome, ajoutez ces lignes (et modifiez la ligne de contenu):

font-family: 'FontAwesome';
font-weight: normal;
font-size: 14px;
content: "\f069";
th3uiguy
la source
1
top:7px;causera des problèmes si l'étiquette est multiligne. Il vaudrait mieux le remplacer margin-top: -4px;par exemple.
sasha_gud
7

.form-group .required .control-label:afterdevrait probablement l'être .form-group.required .control-label:after. La suppression de l'espace entre .form-group et .required est le changement.

Jeremy Cook
la source
Merci! fonctionne également pour bootstrap 2.3 avec .control-group.required .control-label:after { content:"*"; color:red; }
edditor
4

Les deux autres réponses sont correctes. Lorsque vous incluez des espaces dans vos sélecteurs CSS, vous ciblez les éléments enfants ainsi:

.form-group .required {
    styles
}

Cibler un élément avec la classe "required" qui est à l'intérieur d'un élément avec la classe "form-group".

Sans l'espace, il cible un élément qui a les deux classes. 'required' et 'form-group'

Corey
la source
Il s'agit d'un problème distinct de votre question initiale. Mais votre CSS fait exactement ce que vous lui dites. Il met l'astérisque avec le champ d'étiquette (qui pour vos termes et conditions est vide) et non le champ de saisie. Si vous voulez qu'ils apparaissent ensemble, vous devrez les regrouper dans le HTML. Mais alors vous avez un champ d'étiquette vide qui est mauvais. Je voudrais simplement abandonner l'étiquette sur les termes et conditions mais garder les validations.
Corey
1

Ce CSS a fonctionné pour moi:

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

et ce 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
la source
C'est un peu étrange d'avoir l'étiquette de contrôle sur le div qui contient à la fois l'étiquette et l'entrée.
devlin carnate