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); }

我遇到的问题是，当我向输入框提供我正在跳跃的焦点时，我可以使用以下隐藏图像

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>

Answer 2

尝试将以下行添加到您的css

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

然后将输入框更改为以下内容。

<input type=text name=name required=required/>

'required'将确保数据（至少是空格）是否可用，并将值设置为有效或无效。

输入框上的CSS背景图像出现在左侧

2 个答案: