Web-Frontend
CSS-Tutorial
Detaillierte Grafik- und Texterklärung zur Verschönerung des Einzelauswahl- und Checkauswahlstils
Detaillierte Grafik- und Texterklärung zur Verschönerung des Einzelauswahl- und Checkauswahlstils
Dieses Mal werde ich Ihnen eine detaillierte Bild- und Texterklärung zum Verschönern von Einzelauswahl- und Mehrfachauswahlstilen geben. HinweiseEs gibt welche. Im Folgenden finden Sie praktische Fälle. Werfen wir einen Blick darauf.
Vorwort
Ich glaube, jeder weiß, dass in Formularelementen Optionsschaltfläche und Häkchenschaltfläche Beides vorhanden ist ausgewählte und nicht ausgewählte Zustände. Es ist schwierig, die Standardstile dieser beiden Schaltflächen zu überschreiben. In CSS3 können wir benutzerdefinierte Stile über den Statusselektor „:checked“ und andere Tags implementieren. Mit CSS3 können wir ein sehr personalisiertes Benutzerformular erstellen. Der in diesem Artikel erzielte Effekt ist sehr gut.
Das Rendering ist wie folgt
Beispielcode
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>复选单选样式</title>
<link rel="stylesheet" href="style.css">
</head>
<style>
form {
border: 1px solid #ccc;
padding: 20px;
width: 300px;
}
.wrapper {
margin-bottom: 10px;
}
/*复选框*/
.checkbox-box {
display: inline-block;
width: 20px;
height: 20px;
margin-right: 10px;
position: relative;
border: 2px solid orange;
vertical-align: middle;
}
.checkbox-box input {
opacity: 0;
position: absolute;
top:0;
left:0;
z-index:10;
}
.checkbox-box span {
position: absolute;
top: -10px;
right: 3px;
font-size: 30px;
font-weight: bold;
font-family: Arial;
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
color: orange;
}
.checkbox-box input[type="checkbox"] + span {
opacity:0;
}
.checkbox-box input[type="checkbox"]:checked + span {
opacity: 1;
}
/*单选框*/
.redio-box {
display: inline-block;
width: 30px;
height: 30px;
margin-right: 10px;
position: relative;
background: orange;
vertical-align: middle;
border-radius: 100%;
}
.redio-box input {
opacity: 0;
position: absolute;
top:0;
left:0;
width: 100%;
height:100%;
z-index:100;/*使input按钮在span的上一层，不加点击区域会出现不灵敏*/
}
.redio-box span {
display: block;
width: 10px;
height: 10px;
border-radius: 100%;
position: absolute;
background: #fff;
top: 50%;
left:50%;
margin: -5px 0 0 -5px;
z-index:1;
}
.redio-box input[type="radio"] + span {
opacity: 0;
}
.redio-box input[type="radio"]:checked + span {
opacity: 1;
}
</style>
<body>
<h2>复选框：</h2>
<form action="#">
<p class="wrapper">
<p class="checkbox-box">
<input name="1" type="checkbox" checked id="usename" />
<span>√</span>
</p>
<label for="usename">体育</label>
</p>
<p class="wrapper">
<p class="checkbox-box">
<input name="1" type="checkbox" id="usepwd" />
<span>√</span>
</p>
<label for="usepwd">音乐</label>
</p>
<p class="wrapper">
<p class="checkbox-box">
<input name="1" type="checkbox" id="checkbox3" />
<span>√</span>
</p>
<label for="checkbox3">读书</label>
</p>
<p class="wrapper">
<p class="checkbox-box">
<input name="1" type="checkbox" id="checkbox4" />
<span>√</span>
</p>
<label for="checkbox4">运动</label>
</p>
</form>
<h2>单选框</h2>
<form action="#">
<p class="wrapper">
<p class="redio-box">
<input type="radio" checked="checked" id="boy" name="1" /><span></span>
</p>
<label for="boy">男</label>
</p>
<p class="wrapper">
<p class="redio-box">
<input type="radio" id="girl" name="1" /><span></span>
</p>
<label for="girl">女</label>
</p>
</form>
</body>
</html>Hinweis:
+ ist der angrenzende CSS-Selektor.
Es gibt nur vier Beziehungsselektoren, nämlich Leerzeichen > (einschließlich Selektoren, Unterselektoren, benachbarte Selektoren und Geschwisterselektoren)
Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.
Empfohlene Lektüre:
CSS-Implementierung der Navigationsleiste der ersten Ebene
Detaillierte Erläuterung der Verwendung von Linear-Gradient
Häufige Missverständnisse bei der Verwendung von CSS und HTML
Das obige ist der detaillierte Inhalt vonDetaillierte Grafik- und Texterklärung zur Verschönerung des Einzelauswahl- und Checkauswahlstils. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1382
52
macOS: So ändern Sie die Farbe von Desktop-Widgets
Oct 07, 2023 am 08:17 AM
In macOS Sonoma müssen Widgets nicht wie in früheren Versionen von Apples macOS außerhalb des Bildschirms ausgeblendet oder im Benachrichtigungscenter vergessen werden. Stattdessen können sie direkt auf dem Desktop Ihres Mac platziert werden – sie sind auch interaktiv. Bei Nichtgebrauch verschwinden macOS-Desktop-Widgets in einem monochromen Stil im Hintergrund, wodurch Ablenkungen reduziert werden und Sie sich auf die aktuelle Aufgabe in der aktiven Anwendung oder im aktiven Fenster konzentrieren können. Wenn Sie jedoch auf den Desktop klicken, kehren sie zur Vollfarbe zurück. Wenn Sie ein tristes Aussehen bevorzugen und diesen Aspekt der Einheitlichkeit auf Ihrem Desktop beibehalten möchten, gibt es eine Möglichkeit, es dauerhaft zu machen. Die folgenden Schritte zeigen, wie es gemacht wird. Öffnen Sie die Systemeinstellungen-App
Leitfaden zum Beheben von Fehlausrichtungen von WordPress-Webseiten
Mar 05, 2024 pm 01:12 PM
Leitfaden zum Beheben falsch ausgerichteter WordPress-Webseiten. Bei der Entwicklung von WordPress-Websites stoßen wir manchmal auf falsch ausgerichtete Webseitenelemente. Dies kann an Bildschirmgrößen auf verschiedenen Geräten, Browserkompatibilität oder falschen CSS-Stileinstellungen liegen. Um diese Fehlausrichtung zu beheben, müssen wir das Problem sorgfältig analysieren, mögliche Ursachen finden und es Schritt für Schritt debuggen und reparieren. In diesem Artikel werden einige häufig auftretende Probleme mit der Fehlausrichtung von WordPress-Webseiten sowie entsprechende Lösungen vorgestellt und spezifische Codebeispiele bereitgestellt, die bei der Entwicklung helfen
Verwenden Sie ThinkPHP6, um eine schöne 404-Seite zu implementieren
Jun 20, 2023 am 11:06 AM
Mit der Weiterentwicklung des Internets sind viele Websites oder Anwendungen nach und nach komplexer geworden. Wenn Benutzer es verwenden, stoßen sie häufig auf Fehlerseiten, von denen die 404-Seite am häufigsten ist. Die 404-Seite bedeutet, dass die Seite, auf die zugegriffen wird, nicht existiert und eine häufige Fehlerseite ist. Bei Websites oder Anwendungen kann eine schöne 404-Seite das Benutzererlebnis erheblich verbessern. In diesem Artikel stellen wir vor, wie Sie mit ThinkPHP6 schnell eine schöne 404-Seite implementieren. Eine Route erstellen Zuerst müssen wir im Routenordner eine Route erstellen
CSS-Webhintergrundbilddesign: Erstellen Sie verschiedene Hintergrundbildstile und -effekte
Nov 18, 2023 am 08:38 AM
CSS-Webseiten-Hintergrundbilddesign: Erstellen Sie verschiedene Hintergrundbildstile und -effekte. Es sind spezifische Codebeispiele erforderlich. Zusammenfassung: Im Webdesign sind Hintergrundbilder ein wichtiges visuelles Element, das die Attraktivität und Lesbarkeit der Seite effektiv verbessern kann. In diesem Artikel werden einige gängige Designstile und -effekte für CSS-Hintergrundbilder vorgestellt und entsprechende Codebeispiele bereitgestellt. Leser können diese Hintergrundbildstile und -effekte entsprechend ihren eigenen Bedürfnissen und Vorlieben auswählen und anwenden, um bessere visuelle Effekte und ein besseres Benutzererlebnis zu erzielen. Schlüsselwörter: CSS, Hintergrundbild, Designstil, Effekt, Codedarstellung
Verschönern Sie Ihre Benutzeroberfläche mit neuen JavaFX-CSS-Stylesheets in Java 13
Jul 30, 2023 pm 02:49 PM
Verwenden Sie das neue JavaFXCSS-Stylesheet in Java13, um die Benutzeroberfläche zu verschönern. Einführung: Bei der Softwareentwicklung sind die Schönheit und Benutzerfreundlichkeit der Benutzeroberfläche entscheidend für die Verbesserung des Benutzererlebnisses. JavaFX ist eine moderne, ausdrucksstarke Schnittstellentechnologie auf der Java-Plattform, die umfangreiche UI-Komponenten und -Funktionen bereitstellt. Um die Benutzeroberfläche schöner zu gestalten, stellt JavaFX CSS-Stylesheets zur Verschönerung und Anpassung der Benutzeroberfläche bereit. In Java13 führte JavaFX neue CSS-Stylesheets ein,
Wie man ein Wort verschönert
Mar 19, 2024 pm 08:31 PM
Wenn wir Word-Dokumente bearbeiten, hoffen wir immer, die Dokumente schöner und schöner zu machen. Wenn es jedoch um die Verschönerung von Wörtern geht, denken viele Leute daran, die Schriftarten und Farben individueller zu gestalten und die Ränder und Zeilenabstände anzupassen Tatsächlich können wir Word durch mehr Operationen schöner machen. Beispielsweise können wir Word-Dokumente schöner machen, indem wir Bilder einfügen, Ränder ändern usw. Als nächstes werden wir versuchen, Randmuster zu verwenden, um Word-Dokumente schöner zu machen. Lasst uns gemeinsam lernen! Öffnen Sie zunächst ein neues Word-Dokument und suchen Sie dann auf der Registerkarte [Startseite] nach dem Tool [Absatz]. Klicken Sie anschließend auf die Option [Rand], wie durch den roten Pfeil im Bild angezeigt. 2. Nachdem wir geklickt haben, öffnet das System automatisch eine Dropdown-Auswahl
Verwenden Sie den Pseudoklassenselektor :nth-last-child(2), um den Stil des vorletzten untergeordneten Elements auszuwählen
Nov 20, 2023 am 11:22 AM
Verwenden Sie den Pseudoklassenselektor :nth-last-child(2), um den Stil des vorletzten untergeordneten Elements auszuwählen. In CSS ist der Pseudoklassenselektor ein sehr leistungsfähiges Werkzeug, das zur Auswahl verwendet werden kann die spezifischen Elemente. Einer davon ist der Pseudoklassenselektor :nth-last-child(2), der das vorletzte untergeordnete Element auswählt und Stile darauf anwendet. Erstellen wir zunächst ein Beispiel-HTML-Dokument, damit wir diesen Pseudoklassenselektor darin verwenden können. von
Verwenden Sie den Pseudoklassenselektor :root, um den Stil des Stammelements des Dokuments auszuwählen
Nov 20, 2023 pm 02:18 PM
Die Verwendung des Pseudoklassenselektors :root zum Auswählen des Stils des Stammelements des Dokuments erfordert bestimmte Codebeispiele. In CSS können wir den Pseudoklassenselektor :root verwenden, um das Stammelement des Dokuments auszuwählen und einen bestimmten Stil anzugeben dafür. Der :root-Pseudoklassenselektor entspricht in den meisten Fällen der Auswahl von HTML-Elementen. Wenn jedoch ein Namespace im Dokument vorhanden ist, wählt der :root-Pseudoklassenselektor das Stammelement des Standard-Namespace aus. Hier ist ein konkretes Codebeispiel, das zeigt, wie der Pseudoklassenselektor :root verwendet wird, um das Stammelement des Dokuments auszuwählen.
