Maison > Article > interface Web > Deux méthodes JS pour ajouter de petites icônes à l'entrée
Deux méthodes JS pour ajouter de petites icônes à l'entrée
- 小云云original
- 2017-12-22 10:36:534096parcourir
Dans cet article, nous présentons principalement deux méthodes JS pour ajouter de petites icônes à Input. Lors de la création d'un site Web, vous devez souvent ajouter la fonction petite icône à Input. Il semble que la fonction soit très simple, mais elle l'est toujours. un peu délicat à mettre en œuvre. L'éditeur ci-dessous vous présentera deux méthodes pour ajouter de petites icônes dans JS Input. Les amis qui en ont besoin peuvent s'y référer.
Méthode 1
Insérez la petite icône comme arrière-plan de la saisie, entrez simplement le code :
<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>Méthode 2
Utilisez la balise i pour insérer
<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> Recommandations associées :
JS imitation Alipay entrée affichage loupe numérique
Explication détaillée de la fonction d'invite floue de l'entrée javascript zone de saisie
Comment distinguer les zones de saisie et les boutons
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!