So fügen Sie mithilfe von CSS Sternchen zu erforderlichen Formularoptionen hinzu

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

Wenn beim Erstellen eines Webformulars eine Option erforderlich ist, fügen Sie der Option normalerweise ein Sternchen hinzu, 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

Fügen Sie dann dem Sternchen einen kleinen CSS-Stil hinzu:

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

Zum Beispiel:

Aber manchmal können wir die HTML-Struktur nicht ändern oder möchten keine zusätzlichen bedeutungslosen Tags hinzufügen. In diesem Fall können wir verwenden das CSS nach der Pseudoklasse, um eine Sternzahl zu erstellen.

Immer noch das obige Formular, löschen Sie den <span class="required">*</span>-Code und fügen Sie dann CSS hinzu:

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

Auf diese Weise können Sie es über CSS erstellen Ein Sternchen zeigt die erforderliche Auswahl an.

Tatsächlich sind die Vorher- und Nachher-Pseudoklassen von CSS sehr einfach zu verwenden. Die meisten Leute verwenden sie nur, um Floats zu löschen. Tatsächlich können Sie erstaunliche Dinge tun, indem Sie Gutes tun Verwendung dieser beiden Pseudoklassen.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Verwenden Sie CSS3, um Welleneffekte zu erzielen, und H5, um dynamische Welleneffekte zu erzielen

Bezogen auf die CSS3-Region Modulregionscode

So verwenden Sie CSS, um einen schwarzen Navigationsmenüeffekt mit Schatteneffekt zu erzielen

Das obige ist der detaillierte Inhalt vonSo fügen Sie mithilfe von CSS Sternchen zu erforderlichen Formularoptionen hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!