Heim >Web-Frontend >CSS-Tutorial >So fügen Sie mithilfe von CSS Sternchen zu erforderlichen Formularoptionen hinzu

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

不言
不言Original
2018-06-20 11:24:572485Durchsuche

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 a4c1001aca540e6e716ee2c369e08b58*54bdf357c58b8a65c66d7c19c8e4d114-Code und fügen Sie dann CSS hinzu:

.form-group label:after {
    content: &#39; *&#39;;
    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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn