web-dev-qa-db-fra.com

Utilisez CSS pour ajouter automatiquement un astérisque 'champ obligatoire' pour former des entrées

Quel est un bon moyen de surmonter le fait malheureux que ce code ne fonctionnera pas comme souhaité:

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

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

Dans un monde parfait, tous les inputs requis obtiendront le petit astérisque indiquant que le champ est obligatoire. Cette solution est impossible car le code CSS est inséré après le contenu de l'élément, pas après l'élément lui-même, mais quelque chose de ce genre serait idéal. Sur un site contenant des milliers de champs obligatoires, je peux déplacer l'astérisque devant l'entrée avec une modification apportée à une ligne (:after à :before) ou à la fin de l'étiquette (.required label:after) ou devant l'étiquette. , ou à une position sur la boîte contenant, etc ... 

Ceci est important non seulement au cas où je changerais d'avis quant à l'endroit où placer l'astérisque partout, mais également dans les cas étranges où la présentation du formulaire ne permet pas l'astérisque dans la position standard. Il fonctionne également bien avec une validation qui vérifie le formulaire ou met en évidence des contrôles mal remplis.

Enfin, cela n’ajoute pas de balisage supplémentaire.

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

cssformsvalidationstandards
92
brentonstrine

Bien que ce soit la réponse acceptée, s'il vous plaît m'ignore et utilise la syntaxe :after suggérée ci-dessous. Ma solution n'est pas accessible.

Un résultat similaire pourrait être obtenu en utilisant une image d'arrière-plan d'une image d'un astérisque et en définissant l'arrière-plan de l'étiquette/entrée/la division externe et un remplissage de la taille de l'image astérisque ..

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

Cela mettra l'astérisque À L'INTÉRIEUR de la zone de texte, mais mettre la même chose sur div.required au lieu de .required input sera probablement plus ce que vous cherchez, bien qu'un peu moins élégant.

Cette méthode ne nécessite aucune entrée supplémentaire .

34
jaypeagi

Est-ce ce que tu avais en tête?

http://jsfiddle.net/erqrN/1/

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

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

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

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

Jouez avec votre structure exacte: http://jsfiddle.net/bQ859/

61
laffuste

Pour le mettre exactement dans l'entrée comme il est montré sur l'image suivante: 

enter image description here

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é en utilisant une mise en page fixe, donc c'était ok pour moi.

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

21
Tebe

é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>
12
Kondal
input[required], select[required] {
    background-image: url('/img/star.png');
    background-repeat: no-repeat;
    background-position-x: right;
}

L’image a un espace de 20 pixels à droite qui ne se chevauche pas avec la flèche de la liste déroulante sélectionnée

enter image description here

Et ça ressemble à ça: enter image description here

10
Toolkit
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;
}
7
faisal

Utiliser jQuery et 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>

4
Falah

.asterisc {
  display: block;
  color: red;
  margin: -19px 185px;
}
<input style="width:200px">
<span class="asterisc">*</span>

2
Vitaly Zdanevich

Je pense que c'est le moyen efficace de le faire, pourquoi tant de maux de tête

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

Nous sommes en 2019 et les réponses précédentes à ce problème n’utilisent pas

  1. Grille CSS
  2. Variables CSS
  3. Éléments de formulaire HTML5
  4. SVG en CSS

La grille CSS est le moyen de créer des formulaires en 2019, car vous pouvez avoir vos étiquettes précédant vos entrées sans avoir de divs, étendues, étendues avec astérisques ni autres reliques.

Voici où nous allons avec CSS minimal:

Example screenshot

Le code HTML pour ce qui précède:

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

Un texte fictif peut être ajouté aussi et est fortement recommandé. (Je réponds juste à cette mi-forme).

Passons maintenant aux variables 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>');

Le CSS pour les éléments de formulaire:

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

Le formulaire lui-même devrait être dans la grille CSS:

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

Les valeurs des colonnes peuvent être définies sur 1fr auto ou 1fr avec des éléments tels que les balises <p> dans le formulaire défini sur 1/-1. Vous modifiez les variables dans vos requêtes multimédias de manière à ce que les zones de saisie atteignent leur largeur maximale sur mobile et celles décrites ci-dessus sur le bureau. Vous pouvez également modifier votre intervalle de réseau sur mobile si vous le souhaitez en utilisant l'approche par variables CSS.

Lorsque les cases sont valides, cochez la case verte au lieu de l’astérisque.

Le format SVG en CSS permet au navigateur de ne pas avoir à effectuer un aller-retour vers le serveur pour obtenir une image de l'astérisque. De cette façon, vous pouvez affiner les astérisques. Les exemples ici sont à un angle inhabituel, vous pouvez les éditer car l’icône SVG ci-dessus est entièrement lisible. La zone d'affichage peut également être modifiée pour placer l'astérisque au-dessus ou au-dessous du centre.

0
Henry's Cat