JS Input里添加小图标的两种方法
我们在做网页的时候，经常需要在input里面添加小图标，那么这里就介绍比较常见的两种方法。
方法一
将小图标当做input的背景来插入，直接上代码吧：
<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>
<div class="box">
<input type="text" class="username" value="搜索"/>
</div>
</body>
方法二
使用 i 标签插入
<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>
<div class="box">
<i class="icon-search"></i>
<input type="text" class="username" value="搜索"/>
</div>
</body>
总结
以上所述是小编给大家介绍的JS Input里添加小图标的两种方法，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
JS实现小球的弹性碰撞效果
一、HTML代码（body部分）body!--只需要做一个大div包裹几个小div即可，你想要几个小球碰撞就在内部做几个div即可，这里我们做了6个小球--divid="main"div/divd
浅谈webpack下的AOP式无侵入注入
说起来,面向切面编程(AOP)自从诞生之日起，一直都是计算机科学领域十分热门的话题，但是很奇怪的是，在前端圈子里，探讨AOP的文章似乎并不是多，
基于js中style.width与offsetWidth的区别(详解)
作为一个初学者，经常会遇到在获取某一元素的宽度（高度、top值...）时，到底是用style.width还是offsetWidth的疑惑。1.当样式写在行内的时候，如divid="box"
