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

我正在为我的摄影创建一个wordpress网站。在创建接触箱形成具有三个输入框我已经在每个输入框的末尾添加了一个图像使用以下用于： -输入框上的CSS背景图像出现在左侧

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我怕我的网站不活还没有显示出会发生什么

来源

2015-02-10 Adrian lock

提供一个代码片段，或者减少样本并将其放置到jsfiddle中。 – jbutler483 2015-02-10 12:03:20

你听起来像你想产生这样的：

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>

来源

2015-02-10 12:09:07 jbutler483

尝试添加以下行到您的css

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

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

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

'必需'将确保数据至少有一个空间可用或不可用，并将设置该值有效或无效。

来源

2015-02-10 12:15:21

感谢大家发现是什么导致了这个问题奇怪，我一直在CSS，并没有看到它的主题CSS的另一部分是在这些输入表单上做的。 '转换：背景0.2s缓出0s;' 然而，在运行你的演示** jbutler483 **你在下面的行使它非常窒息，但试图这只是带回相同的问题，我会想到它应该已经取代它 '过渡：全部0.8s;' – 2015-02-10 12:33:33

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

回答

相关问题