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里添加小图标的两种方法，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
-
本文向大家介绍IOS给图片添加水印（两种方式），包括了IOS给图片添加水印（两种方式）的使用技巧和注意事项，需要的朋友参考一下 为了防止自己辛苦做的项目被别人盗走，采取图片添加水印，在此表示图片的独一无二。加水印不是在上面添加几个Label，而是我们把字画到图片上成为一个整体，下面小编给大家分享IOS给图片添加水印（两种方式）。 提供一个方法,此方法只需要传递一个要加水印的图片和水印的内容就达到效
-
本文向大家介绍易语言信息框添加图标的方法，包括了易语言信息框添加图标的方法的使用技巧和注意事项，需要的朋友参考一下 易语言信息框的制作很简单，但是怎么修改信息框的图标呢？下面小编为大家解决问题 1、打开易语言，选择Windows程序窗口 2、这里只需要一个按钮就足够了，如果需要其它的可以自己添加上去。 3、双击按钮进入编程界面，我们在这里编写程序。 4、然后输入一个信息框，这里的"0"的位置就是图
-
rank ▲ ✰ vote url 23 644 117 879 url 字典里添加元素的方法 当一个字典被创建了,能不能在字典里计入一个键?好像没有.add()的方法. >>> d = {'key':'value'} >>> print d {'key': 'value'} >>> d['mynewkey'] = 'mynewvalue' >>> print d {'mynewkey': 'my
-
本文向大家介绍Android添加音频的几种方法，包括了Android添加音频的几种方法的使用技巧和注意事项，需要的朋友参考一下 在res文件夹中新建一个文件夹，命名为raw。在里面放入我们需要的音频文件。 第一种： 第二种： 特别要注意的是：音频文件是占系统资源的 ，要重写onDestroy方法，退出的时候释放资源。 总结 以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的
-
本文向大家介绍android实现添加耳机状态图标的方法，包括了android实现添加耳机状态图标的方法的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了android实现添加耳机状态图标的方法。分享给大家供大家参考。具体如下： 原生态的android系统是没有耳机插入或未插入的状态指示的，本文就是讲解如何添加耳机插入的状态指示。效果图如下 如图，当插入耳机后，在status bar上出现了一
-
本文向大家介绍Android RecyclerView加载两种布局的方法，包括了Android RecyclerView加载两种布局的方法的使用技巧和注意事项，需要的朋友参考一下 当RecyclerView有下拉刷新时，有时候设计图上，体现出来的列表有头部布局，这可以通过Adapter实现加载多套布局就可以，这里以加载两种布局为例说明。 先看看Adapter的代码： getItemViewType