H5 input框添加小图标

最新推荐文章于 2024-09-09 11:03:57 发布

Vincent_Wilk

最新推荐文章于 2024-09-09 11:03:57 发布

阅读量1.8k

点赞数 1

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

本文链接：https://blog.csdn.net/Vincent_Wilk/article/details/104967043

版权

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

摘要由CSDN通过智能技术生成

参考
一般的做法是直接在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