Heim >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
- php中世界最好的语言Original
- 2018-03-22 13:10:161889Durchsuche
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!