H5 input框添加小图标

Vincent_Wilk

于 2020-03-19 14:34:59 发布

阅读量1.9k

点赞数 1

分类专栏：前端文章标签： css html5

本文链接：https://blog.youkuaiyun.com/Vincent_Wilk/article/details/104967043

版权

前端专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何在H5的input框中添加小图标，避免使用不稳定的background属性，而是采用相对定位的方法实现，提供了具体的效果展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考
一般的做法是直接在input框使用background: url(‘图片路径’)，但是我自己折腾了一翻发现这个不是那么靠谱，后来看到这句话：

Advice: stop using and supporting IE 8

发现用相对位置可以完成需求，比如说这个：

#input_container {
    position:relative;
    padding:0 0 0 20px;
    margin:0 20px;
    background:#ddd;
    direction: rtl;
    width: 200px;
}
#input {
    height:20px;
    margin:0;
    padding-right: 30px;
    width: 100%;
}
#input_img {
    position:absolute;
    bottom:2px;
    right:5px;
    width:24px;
    height:24px;
}

<div id="input_container">
    <input type="text" id="input" value>
    <img src="https://cdn4.iconfinder.com/data/icons/36-slim-icons/87/calender.png" id="input_img">
</div>

效果是这样子的：