html - 输入框上的 CSS 背景图像似乎从左侧进入

Question

我正在为我的摄影创建一个 wordpress 网站。在使用三个输入框创建与我联系的表单时，我在每个输入框的末尾添加了一个图像，用于:-

background-repeat: no-repeat;
background-position: 98% center;
background-size: auto 32px;
background-color: #f1f1f1;

后跟此代码以分配图像:-

input#name { background-image: url(images/icons/name.png); }

我遇到的问题是，当我为输入框提供焦点时，我可以只使用 following 来隐藏图像

input#name:focus { background-image: none; }

我可以，但是当它失去焦点时，它会将图像滑过输入框回到最右边。无论我如何尝试，我都不能让它重新出现在右边我试过使用图像而不是无图像；但这没有什么区别我看到一些网站，图像从黑色变为白色，而盒子改变颜色以表示这一点，它们工作正常，而我的图像从灰白色变为白色，请问有什么想法吗？

PS 恐怕我的网站还没有上线，无法展示发生了什么

Answer 1

你听起来像是在尝试生成这样的东西:

demo

.wrap img{
    height:30px;
    width:30px;
    position:absolute;
    top:10%;
    right:0;
    transition:all 0.8s;
}
.wrap{
    display:block;
        height:30px;
    width:220px;
    position:relative;
   margin:20px;
}
.wrap input{
    height:30px;
    width:220px;
}
.wrap input:focus + img{
    opacity:0;
}

<div class="wrap">
    <input type="text" placeholder="image only when not hovered"/>
    <img src="http://placekitten.com/g/300/300" alt=""/>
</div>
<div class="wrap">
    <input type="text" placeholder="another one?"/>
    <img src="http://placekitten.com/g/300/200" alt=""/>
</div>
<div class="wrap">
    <input type="text" placeholder="three is just greedy"/>
    <img src="http://placekitten.com/g/200/300" alt=""/>
</div>