Heim > Artikel > Web-Frontend > So ändern Sie den CSS-Eingabestil
So ändern Sie den CSS-Eingabestil
- 藏色散人Original
- 2021-04-19 09:28:417359Durchsuche
So ändern Sie den CSS-Eingabestil: 1. Verwenden Sie Pseudoklassenelemente, um den Radiostil zu ändern. 2. Zeigen Sie mit der Beschriftung auf die Eingabe und ändern Sie dann den Beschriftungsstil, um den Effekt zu erzielen.
Die Betriebsumgebung dieses Artikels: Windows 7-System, Dell G3-Computer, HTML5- und CSS3-Version.
Css zum Ändern des Eingabefeldstils
Derzeit kennen Blogger nur zwei Methoden. Wenn Schüler andere Methoden haben, besprechen Sie diese bitte
Erstes: Verwenden Sie Pseudoklassenelemente, um den Radiostil zu ändern (diese Methode erfordert keine Hinzufügen zusätzlicher Tags, bequemer)
.div input[type=radio]::after {
position: absolute;
width: 25px;
height: 25px;
background: url(../img/inputBG.jpg) no-repeat;
background-size: 100% 100%;
}Zwei: Verwenden Sie die Beschriftung, um auf die Eingabe zu verweisen, und ändern Sie den Beschriftungsstil, um den Effekt zu erzielen
<html>
<input type="checkbox" checked="checked" id="aa"/><label for="aa"></label>
</html>
<style>
input[type=checkbox]{
visibility: hidden;
}
label{
width:20px;
height:20px;
border:1px solid #707070;
}
input[type=checkbox]:checked + label{
background: url(../img/duigou.jpg)no-repeat;
background-size: 100% 100%;
}
</style>[Empfohlenes Lernen: CSS-Video-Tutorial]
Das obige ist der detaillierte Inhalt vonSo ändern Sie den CSS-Eingabestil. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!