Heim >Web-Frontend >CSS-Tutorial >Verwenden Sie CSS3, um den Anzeigestil von Options- und Kontrollkästchen zu verschönern
Verwenden Sie CSS3, um den Anzeigestil von Options- und Kontrollkästchen zu verschönern
- 高洛峰Original
- 2017-02-11 13:49:311421Durchsuche
Wie wir alle wissen, sieht der native Stil des ersten Elements im Formular nicht sehr gut aus und muss bei der Verwendung in Projekten optimiert werden. Der folgende Artikel stellt hauptsächlich vor, wie man CSS3 verwendet, um den Anzeigestil von Radio zu verschönern und Check-Buttons. Freunde, die es brauchen. Sie können es als Referenz verwenden, schauen wir uns unten um.
Vorwort
Ich glaube, jeder weiß, dass Optionsfelder und Kontrollkästchen in Formularelementen einen ausgewählten und einen deaktivierten Status haben. 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:
+ steht neben CSS-Selektor.
Es gibt nur vier Beziehungsselektoren, nämlich Leerzeichen > (einschließlich Selektoren, Unterselektoren, benachbarte Selektoren und Geschwisterselektoren).
Bitte nutzen Sie CSS3 stärker Schauen Sie auf der chinesischen PHP-Website nach verwandten Artikeln zur Verschönerung des Anzeigestils von Radioauswahlen und Kontrollkästchen!