Utilisez le CSS pour ajouter automatiquement l'astérisque "champ obligatoire" aux entrées de formulaire.

Question

Quelle est la bonne façon de surmonter le fait que ce code ne fonctionnera pas comme prévu ?

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

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

Dans un monde parfait, tous les input obtiendraient le petit astérisque indiquant que le champ est obligatoire. Cette solution est impossible puisque le CSS est inséré après le contenu de l'élément, et non après l'élément lui-même, mais quelque chose comme cela serait idéal. Sur un site comportant des milliers de champs obligatoires, je peux déplacer l'astérisque devant l'entrée en modifiant une seule ligne ( :after à :before ) ou je peux le déplacer à la fin de l'étiquette ( .required label:after ) ou devant l'étiquette, ou à un endroit de la boîte contenant l'étiquette, etc...

C'est important non seulement au cas où je changerais d'avis sur l'endroit où placer l'astérisque, mais aussi pour les cas particuliers où la mise en page du formulaire ne permet pas de placer l'astérisque dans la position standard. Cela convient également à la validation qui vérifie le formulaire ou met en évidence les contrôles mal remplis.

Enfin, il n'ajoute pas de balises supplémentaires.

Existe-t-il de bonnes solutions qui présentent tous ou la plupart des avantages du code impossible ?

Answer 1

C'est ce que vous aviez à l'esprit ?

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

Véase https://developer.mozilla.org/en-US/docs/Web/CSS/pseudo-elements

Answer 2

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

Modifiez votre structure exacte : http://jsfiddle.net/bQ859/

Answer 3

Il s'agit de l'introduire exactement comme le montre l'image suivante :

J'ai trouvé l'approche suivante :

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

Le site sur lequel je travaille est codé à l'aide d'une mise en page fixe, ce qui m'a permis de m'en sortir.

Je ne suis pas sûr que ce soit bon pour la conception de liquides.

Answer 4

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

Answer 5

Écrire en CSS

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

et HTML

<div class="form-group required">

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

    <input type="text">

</div>