Home > Article > Web Front-end > Two JS methods to add small icons to Input
Two JS methods to add small icons to Input
- 小云云Original
- 2017-12-22 10:36:534096browse
In this article, we mainly introduce two JS methods to add small icons to Input. When building a website, you often need to add the small icon function to Input. It seems that the function is very simple, but it is still a bit tricky to implement. The editor below will introduce to you two methods of adding small icons in JS Input. Friends who need it can refer to it. I hope it can help you.
Method 1
Insert the small icon as the background of the input and enter the code directly:
<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>Method 2
Use i tag to insert
##
<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>Related recommendations: JS imitation Alipay input input display digital magnifying glass
javascript input input box fuzzy prompt function detailed explanation
How to distinguish input boxes and buttons
The above is the detailed content of Two JS methods to add small icons to Input. For more information, please follow other related articles on the PHP Chinese website!