css怎么在input中插图片
程序员文章站
2022-03-12 14:01:16
...
css在input中插图片的方法:首先在包含input的div中设置子元素;然后设置外层div定位为relative;接着设置span定位为absolute;最后给input添加margin-left属性即可。
本教程操作环境:windows7系统、HTML5&&CSS3版本、Dell G3电脑。
推荐:css视频教程
css在input里插图片
1、在包含input的div中设置子元素<span>
<div class="search"> <span></span> <input type="text"> </div>
2、设置外层div定位为relative
.search{ position: relative; }
3、设置span定位为absolute,并设置宽高和背景图片
.search > span{ position: absolute; display: inline-block; width: 20px; height: 20px; background: url(./search.png) no-repeat; background-size: 80% 80%; background-position: center; }
4、给input添加margin-left属性。
.search > input{ width: 100%; padding-left: 20px; }
5、效果图
以上就是css怎么在input中插图片的详细内容,更多请关注其它相关文章!
上一篇: 怎么将小程序分享到朋友圈
下一篇: css3怎样设置字体旋转180度
推荐阅读
-
不知大家遇到过这种问题么,一个层宽度设为100%,并设置背景图片,在浏览器中浏览,缩小窗口到滚动条出现,然后拖动滚动条到右侧,右侧的区域变成空白,怎么解决?_html/css_WEB-ITnose
-
关于在HTML表格中插入背景图片图片重复显示的问题_html/css_WEB-ITnose
-
网页中多个图标在一张图片上,使用css将各图标显示_html/css_WEB-ITnose
-
怎么在css3在页面中插入内容
-
sai怎么在一张纸中插入两张图片?
-
在CorelDRAW中怎么把文件的全部资料以图片形式逐页输出?
-
在Excel2010中怎么批量删除图片一张一张的删除太慢
-
在Mac系统中怎么连续看图片?
-
剪映视频中间怎么加图片 剪映app在视频中添加图片教程
-
ai怎么建立剪切蒙版?在AI中给图片建立剪切蒙版的方法及快捷键介绍