輸入框上的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背景圖像出現在左側

回答

相關問題