Explication détaillée du CSS pour ajouter des astérisques aux options de formulaire requises

Ajouter un astérisque à un formulaire signifie un champ obligatoire. Nous avons en fait beaucoup vu cette fonction. Dans cet article, jetons un coup d'œil à un exemple d'ajout d'un astérisque à un champ obligatoire dans un formulaire en utilisant CSS, j'espère. ça peut aider tout le monde.

<script>ec(2);</script>

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

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

puis donnez Ajouter un petit style CSS à l'astérisque :

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

CSS Ajouter un astérisque aux options de formulaire requises

Mais parfois nous ne pouvons pas modifier la structure HTML, ou nous Si vous ne voulez pas ajouter d'étiquette supplémentaire dénuée de sens, vous pouvez utiliser le CSS après la pseudo-classe pour créer un astérisque.

Toujours avec le formulaire ci-dessus, supprimez le code efc33982f0a588fb3522889889d951c9*54bdf357c58b8a65c66d7c19c8e4d114, 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 étonnantes en en faisant bon usage. de ces deux pseudo-classes.

Recommandations associées :

Résumé complet des connaissances sur l'héritage des valeurs d'attribut en CSS

Méthodes complètes de personnalisation de l'omission de texte en CSS pur

Explication détaillée des propriétés des paragraphes CSS

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!