Utilisez CSS pour ajouter des astérisques aux options de formulaire requises. Exemple de partage.

Lors de la création d'un formulaire Web, si une option est requise, un astérisque est généralement ajouté à l'option. Ci-dessous, je vais partager avec vous comment ajouter un astérisque à l'option de formulaire requise en utilisant CSS. Les amis qui en ont besoin peuvent s'y référer. à cela. Eh bien, j’espère que cela aidera tout le monde.

Lors de la création d'un formulaire Web, si une option est requise, un astérisque est généralement ajouté à l'option, comme le formulaire de commentaire de Typecho :

<p class="form-group">
    <label for="author">姓名</label> <span class="required">*</span>
    <input type="text" id="author" name="author" required="required" size="30" class="form-text">
</p>

Exemple :

* Nom

Ajoutez ensuite un petit style CSS à l'astérisque :

.form-group span.required {
    color: #999;
    font-size: 150%;
}

Par exemple :

Mais parfois, nous ne pouvons pas modifier la structure HTML, ou nous ne voulons pas ajouter de balises supplémentaires dénuées de sens. Dans ce cas, nous pouvons utiliser le CSS après la pseudo-classe pour créer un astérisque.

Toujours avec le formulaire ci-dessus, supprimez le code *, puis ajoutez du CSS :

.form-group label:after {
    content: ' *';
    color: #999;
    font-size: 150%;
}

De cette façon, vous pouvez transmettez CSS pour créer un astérisque qui représente une sélection requise.

En fait, les pseudo-classes CSS avant et après sont très faciles à utiliser. La plupart des gens les utilisent simplement pour effacer les flottants. En fait, si vous utilisez votre imagination, vous pouvez faire des choses incroyables en créant de bonnes choses. utilisation de ces deux pseudo-classes.

Recommandations associées :

Implémentation JQuery de RadioButton en tant que partage de méthode de fonction de vérification obligatoire

Les paramètres facultatifs en PHP doivent-ils être présents Après les paramètres requis ?

méthode yii pour supprimer les astérisques dans les champs obligatoires

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!