JS Input里添加小图标的两种方法
更新时间：2017年11月11日 13:28:21 作者：QunBinCheng
大家在做网站的时候，经常需要在input里面添加小图标功能，看似功能很简单，但是实现起来还是有点技巧的，下面小编给大家介绍下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里添加小图标的两种方法，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
相关文章
JavaScript 转码是指将 JavaScript 代码从一种编码方式转换为另一种编码方式,常见的转码方式包括 URL 编码和 Base64 编码,解码是前端比较常见的一种操作,本文就给大家讲讲JavaScript转码方式2023-09-09
这篇文章主要为大家详细介绍了微信小程序实现上传图片功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-05-05
这篇文章主要介绍了Vuex模块化应用实践示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-02-02
JavaScript中undefined和is not defined的区别与异常处理
这篇文章主要给大家介绍了关于JavaScript中undefined和is not defined的区别与异常处理的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2022-03-03
下面小编就为大家带来一篇改变checkbox默认选中状态及取值的实现代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
这篇文章主要介绍了JavaScript设计模式之构造函数模式,结合实例形式分析了构造函数模式的概念、功能、定义及使用方法,需要的朋友可以参考下2018-07-07
这篇文章主要介绍了JS比较2个日期间隔的方法,需要的朋友可以参考下2014-04-04
这篇文章主要介绍了JS实现点击li标签弹出对应的索引功能,结合具体实例形式分析了javascript事件响应、元素遍历等相关操作技巧,需要的朋友可以参考下2019-02-02
这篇文章主要介绍了JavaScript实现文本目标字符替换和一键全部替换，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-06-06
Math 对象并不像 Date 和 String 那样是对象的类，因此没有构造函数 Math()，像 Math.sin() 这样的函数只是函数，不是某个对象的方法。您无需创建它，通过把 Math 作为对象使用就可以调用其所有属性和方法2016-01-01
最新评论