輸入框上的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); } 

問題我已經是當我給輸入框的焦點，我跳我可以只使用下面的隱藏圖像

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/> 

'必需'將確保數據至少有一個空間可用或不可用，並將設置該值有效或無效。