CSS を使用して、必要なフォーム オプションにアスタリスクを追加します。

Webフォームを作成するとき、オプションが必要な場合は、通常、オプションにアスタリスクが追加されます。以下に、CSSを使用してフォームの必須オプションにアスタリスクを追加する方法を説明します。皆さんのお役に立てれば幸いです。

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

例:

* 名前

にアスタリスクを付けます。ちょっとした CSS スタイル:

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

例:

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

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

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

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

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

関連する推奨事項: RadioButton の必須検証機能のメソッド共有の jQuery 実装

PHP のオプションのパラメーターは必須パラメーターの後に来る必要がありますか?

yii必須フィールドのアスタリスクを削除する方法

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