CSS を使用してフォーム入力に必須フィールドのアスタリスクを自動的に追加する方法

CSS を使用してフォーム入力に「必須フィールド」アスタリスクを自動的に追加する方法

それを示すアスタリスク (*) を自動的に追加することができます追加のマークアップを含めなくても、フォーム入力が必要になります。 1 つのアプローチでは、:after CSS 疑似要素を利用して、入力要素の後にアスタリスクを挿入します。

ただし、このアプローチでは、アスタリスクが要素コンテンツの後に挿入されるため、望ましい結果を達成することができなくなります。

この制限を克服し、必要な柔軟性と機能を提供するソリューションを実現するには、次のアプローチを検討してください:

CSS:

<code class="css">.required:after {
    content: " *";
    color: red;
}</code>

HTML:

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

このアプローチでは、:after 疑似要素が .required クラスに適用され、これが割り当てられます。ラベル要素。これにより、ラベルの後にアスタリスクが表示されます。これは、フィールドが必須であることを示すために望ましい位置です。

このソリューションには、次の利点があります。

• 位置を柔軟に制御できるフォーム入力に対するアスタリスクの相対位置。
• フォーム レイアウトによりアスタリスクが標準の位置に表示されないという奇妙なケースを処理する機能。
• フォームをチェックする検証やハイライト表示とうまく機能する。不完全なコントロール。

この手法を使用すると、柔軟性を維持し、追加のマークアップを回避しながら、入力フォームに必須フィールドのアスタリスクを自動的に追加できます。

以上がCSS を使用してフォーム入力に必須フィールドのアスタリスクを自動的に追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。