CODEWITHSUNDEEP
htmlcsswordpress
Adrian lock
Adrian lock

Reputation: 3

CSS background image on input box appears coming in from the left

I'm in the process of creating a wordpress site for my photography. While creating a contact me form with three input boxes I have added an image at the end of each input box using following for:- 

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

followed by this code to assign the image:-

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

Problem I have is when I give the input box the focus I was hopping I could just use following to hide the image

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

Which I can but when it looses the focus it then slides the image across the input box back to the the far right. Regardless of how I try and do it I cannot just get it to reappear on the right I've tried using an image instead of the none; but that has made no difference I have seen sites where the image changes from say black to white at while the box changes colour to denote this and they work fine where as with mine it changes from off white to white any ideas please?

PS I'm afraid my site is not live yet to show what happens

Upvotes: 0

Views: 1508

Answers (2)

Dileep KK
Dileep KK

Reputation: 163

Try adding the following lines to your css

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

Then change your input box to the following. 

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

The 'required' will ensure that the data, at lease a space, is available or not and will set the value valid or invalid.

Upvotes: 0

jbutler483
jbutler483

Reputation: 24539

You sound like you're trying to generate something like this:

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>

Upvotes: 1

Related Questions