html+input改变图标,JS Input里添加小图标的两种方法
我们在做网页的时候，经常需要在input里面添加小图标，那么这里就介绍比较常见的两种方法。
将小图标当做input的背景来插入，直接上代码吧：
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;
}
Box">
搜索"/>
使用 i 标签插入
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;
}
Box">
搜索"/>
总结
以上所述是小编给大家介绍的JS Input里添加小图标的两种方法，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
总结
如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
小编个人微信号 jb51ccc
喜欢与人分享编程技术与工作经验，欢迎加入编程之家官方交流群！
html+input改变图标,JS Input里添加小图标的两种方法相关推荐
- html密码框怎么添加小图标,JS Input里添加小图标的两种方法
我们在做网页的时候,经常需要在input里面添加小图标,那么这里就介绍比较常见的两种方法. 方法一 将小图标当做input的背景来插入,直接上代码吧: *{ margin: 0; padding: 0 ...
- input 单击 图标_JS Input里添加小图标的两种方法
我们在做网页的时候,经常需要在input里面添加小图标,那么这里就介绍比较常见的两种方法. 方法一 将小图标当做input的背景来插入,直接上代码吧: *{ margin: 0; padding: 0 ...
- js循环添加事件的两种方法
js循环添加事件的两种方法 选择下拉列表中的一个li将文本传到框中 问题:写此二级菜单时用到的方法不好,对此进行优化 原始js代码: <script>// 思路:1.点击下拉框a时,ul中 ...
- python文字教程-Python在图片中添加文字的两种方法
本文主要介绍的是利用Python在图片中添加文字的两种方法,下面分享处理供大家参考学习,下来要看看吧 一.使用OpenCV 在图片中添加文字看上去很简单,但是如果是利用OpenCV来做却很麻烦.Ope ...
- python怎么在图片上写字_Python在图片中添加文字的两种方法
本文主要介绍的是利用Python在图片中添加文字的两种方法,下面分享处理供大家参考学习,下来要看看吧 一.使用OpenCV 在图片中添加文字看上去很简单,但是如果是利用OpenCV来做却很麻烦.Ope ...
- python如何在图片上添加文字_Python在图片中添加文字的两种方法
本文主要介绍的是利用Python在图片中添加文字的两种方法,下面分享处理供大家参考学习,下来要看看吧 一.使用OpenCV 在图片中添加文字看上去很简单,但是如果是利用OpenCV来做却很麻烦.Ope ...
- 怎样在python的turtle中输入文字_Python在图片中添加文字的两种方法
本文主要介绍的是利用Python在图片中添加文字的两种方法,下面分享处理供大家参考学习,下来要看看吧 一.使用OpenCV 在图片中添加文字看上去很简单,但是如果是利用OpenCV来做却很麻烦.Ope ...
- JS实现千位分隔符的两种方法
分享JS实现千位分隔符的两种方法 自己最好在 VScode 进行练习,看不如动手来得深刻 方法一:普通方法 <script>function numFormat(num) {var tmp ...
- 怎么在python中添加文字_Python在图片中添加文字的两种方法
本文主要介绍的是利用Python在图片中添加文字的两种方法,下面分享处理供大家参考学习,下来要看看吧 一.使用OpenCV 在图片中添加文字看上去很简单,但是如果是利用OpenCV来做却很麻烦.Ope ...
最新文章
- 基础面试题 — 数据结构与算法
- 第十六届全国大学生智能汽车竞赛全国总决赛承办申请汇报
- JS之ES6扩展运算符三个点（...）用于剥离{} 获取属性值
- python多线程并行编程_Python并行编程(二)：基于线程的并行
- HBuilder、HBuilderX连接夜神模拟器
- 【Swin Transformer Block】的整体流程如下：
- 【转】文件各种上传，离不开的表单
- 派生类构造的时候一定要调用_分手的时候，一定要好好说再见
- 【学习笔记】Guice学习小结
- JavaScript设计模式——状态模式
- python写身份证_python 关于身份证号码的相关操作
- Python格式化字符 %s %d %f %g实例讲解
- Web服务器配置管理
- java英语apple_apple是什么意思_apple在线翻译_英语_读音_用法_例句_海词词典
- 计算机网络实验一 验证性实验
- Linux中如何新建用户
- 024 Rust死灵书之Send和Sync
- mysql workbench8.0关键词大写_Mysql从入门到精通全文整理
- arduino(esp8266)驱动74hc595进行流水灯异常一例
- 这可能是关于动态面板，最细致的讲解了