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

不言
Freigeben: 2018-06-20 11:24:57
Original
2488 Leute haben es durchsucht

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>
Nach dem Login kopieren

Beispiel:

* Name

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

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

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: &#39; *&#39;;
    color: #999;
    font-size: 150%;
}
Nach dem Login kopieren

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!

Verwandte Etiketten:
css
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage