input里面添加图片

最新推荐文章于 2024-07-25 10:33:27 发布

heromps

最新推荐文章于 2024-07-25 10:33:27 发布

阅读量2.6w

点赞数 13

分类专栏： js 文章标签： js css

本文链接：https://blog.csdn.net/heromps/article/details/112576867

版权

js 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

input里面添加图片

思路：利用input背景图片来实现，主要使用的是css样background-image

l利用background-image引入图片，background-image: url(/images/teststair/7-日历.png);
利用background-repeat去除背景图片重复， background-repeat: no-repeat;
利用background-position来设置图片位置， background-position: 80px;

具体实现：

html页面：

<li style="width: 120px;">
    <input type="text" class="form-control layui-input overall_avgCov"  value="" id="startTime" placeholder="" readonly>

</li>

根据id设置css样式：

#startTime{
    background-image:url('/images/teststair/7-日历.png');
    font-size: 7px;
    color: black !important;
    border-radius: 12px;
    background-position: 80px;
    background-repeat:no-repeat;
    display: inline-block;
    color: #428bca;
    height:34px!important;
}