必須のフォームオプションにアスタリスクを追加するCSSの詳細説明

フォームにアスタリスクを追加するということは、必須フィールドを意味します。実際、この記事では、CSS を使用してフォームの必須フィールドにアスタリスクを追加する例を見ていきます。皆さんのお役に立てれば幸いです。

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

Web フォームを作成するとき、オプションが必要な場合は、通常、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>

次に、アスタリスクに少し CSS スタイルを追加します:

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

CSS to Addingフォームへのアスタリスクは必須オプションです

しかし、HTML 構造を変更できない場合や、余分な意味のないタグを追加したくない場合は、疑似クラスの後に CSS を使用できます。アスタリスクを作成します。

上記のフォームをそのまま使用し、* コードを削除して、CSS を追加します:

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

このように、CSS を使用して、必要な選択を行ってください。

実際、CSS の before と after の疑似クラスは、float をクリアするために使用するだけで非常に簡単です。実際、想像力を働かせれば、これら 2 つをうまく活用することで素晴らしいことができます。疑似クラス。

関連する推奨事項:

CSS における属性値の継承に関する知識の包括的な概要

純粋な CSS でテキスト省略をカスタマイズする包括的な方法

CSS 段落属性の詳細な説明

以上が必須のフォームオプションにアスタリスクを追加するCSSの詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。