Verwenden Sie CSS, um den erforderlichen Formularoptionen Sternchen hinzuzufügen

Wenn beim Erstellen eines Webformulars eine Option erforderlich ist, wird der Option normalerweise ein Sternchen hinzugefügt. Nachfolgend erkläre ich Ihnen, wie Sie mithilfe von CSS ein Sternchen zur erforderlichen Formularoption hinzufügen Ich hoffe, es hilft allen.

Wenn beim Erstellen eines Webformulars eine Option erforderlich ist, wird der Option normalerweise ein Sternchen hinzugefügt, z. B. dem Kommentarformular von 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>

Beispiel:

* Name

Dann fügen Sie dem Sternchen einen kleinen CSS-Stil hinzu:

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

Zum Beispiel:

Aber manchmal sind wir möglicherweise nicht in der Lage, die HTML-Struktur zu ändern, oder wir möchten keine zusätzlichen bedeutungslosen Tags hinzufügen. In diesem Fall können wir die CSS-Nachfolge-Pseudoklasse verwenden, um ein Sternchen zu erstellen.

Löschen Sie weiterhin im obigen Formular den *-Code und fügen Sie dann CSS hinzu:

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

Auf diese Weise können Sie Übergeben Sie CSS, um ein Sternchen zu erstellen, das eine erforderliche Auswahl darstellt.

Tatsächlich sind CSS vor und nach Pseudoklassen sehr einfach zu verwenden. Die meisten Leute verwenden sie nur zum Löschen von Floats. Wenn Sie Ihrer Fantasie freien Lauf lassen, können Sie tatsächlich erstaunliche Dinge tun, indem Sie sie sinnvoll einsetzen dieser beiden Pseudoklassen.

Verwandte Empfehlungen:

JQuery-Implementierung der erforderlichen Methodenfreigabe für die Überprüfungsfunktion von RadioButton

Müssen optionale Parameter in PHP in After the enthalten sein? erforderliche Parameter?

yii-Methode zum Entfernen von Sternchen in Pflichtfeldern

Das obige ist der detaillierte Inhalt vonVerwenden Sie CSS, um den erforderlichen Formularoptionen Sternchen hinzuzufügen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!