文本框里面加删除按钮

1、css样式代码

<style type="text/css" >
.icon-search {
        background: url(./css/images/删除.png) no-repeat;
        width: 15px;
        height: 15px;
        position: absolute;
        display: block;
        /*top: 10px;
        right: 5px;*/
        cursor: pointer
    }
</style>

2、html代码

<div id="box">
    <input id="target" type="text" />
    <i class="icon-search"></i>
</div>

 3、jQuery代码

 $(function () {
            //要删除的target
            var elem = $("#target");
            var X, Y;
            X = elem.offset().left + elem[0].offsetWidth - (15 + 5);//距离浏览器左边距离
            Y = elem.offset().top + ((elem[0].offsetHeight) / 2) - 15 / 2;//距离浏览器上边距离
            $(".icon-search").css({ left: X, top: Y });
        });

4、效果图片

5、素材文件

转载于:https://www.cnblogs.com/study10000/p/10419665.html