Heim > Artikel > Web-Frontend > Zwei JS-Methoden zum Hinzufügen kleiner Symbole zur Eingabe
Zwei JS-Methoden zum Hinzufügen kleiner Symbole zur Eingabe
- 小云云Original
- 2017-12-22 10:36:534096Durchsuche
In diesem Artikel stellen wir hauptsächlich zwei JS-Methoden vor, um der Eingabe kleine Symbole hinzuzufügen. Beim Erstellen einer Website müssen Sie häufig die Funktion für kleine Symbole zur Eingabe hinzufügen Die Implementierung ist etwas schwierig. Der folgende Editor stellt Ihnen zwei Methoden zum Hinzufügen kleiner Symbole in JS Input vor. Freunde, die es benötigen, können es Ihnen helfen.
Methode 1
Fügen Sie das kleine Symbol als Hintergrund der Eingabe ein, geben Sie einfach den Code ein:
<style type="text/css">
*{
margin: 0;
padding: 0;
}
input{
border: none;
}
.box{
height: 50px;
background: yellow;
}
.box input{
width: 200px;
height: 30px;
border-radius: 15px;
margin: 10px 0;
background: url(image/search.gif) no-repeat;
background-color: white;
background-position: 3px;
padding-left: 30px;
border: 1px solid black;
outline: none;
}
</style>
</head>
<body>
<p class="box">
<input type="text" class="username" value="搜索"/>
</p>
</body>Methode 2
Verwenden Sie das i-Tag, um
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
width: 200px;
position: relative;
}
.box .icon-search{
background: url(image/search.gif) no-repeat;
width: 20px;
height: 20px;
position: absolute;
top: 6px;
left: 0;
}
.box .username{
padding-left: 30px;
height: 25px;
}
</style>
</head>
<body>
<p class="box">
<i class="icon-search"></i>
<input type="text" class="username" value="搜索"/>
</p>
</body> einzufügen Verwandte Empfehlungen:
JS-Nachahmung Alipay-Eingabe Eingabeanzeige digitale Lupe
Detaillierte Erläuterung der Fuzzy-Prompt-Funktion der Javascript-Eingabe Eingabefeld
So unterscheiden Sie Eingabefelder und Schaltflächen
Das obige ist der detaillierte Inhalt vonZwei JS-Methoden zum Hinzufügen kleiner Symbole zur Eingabe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!