Question

I am trying to make an input form have a background image, but as soon as I apply the CSS class to the input, the default value does not show up (it does work if there is no CSS class applied). Here is the HTML:

<form>
     <input type="text" class="emailInput" value="Enter your email address">
     <input type="submit" class="emailBtn" value="">
</form>

And here is the CSS that is associated with it:

input.emailInput {
color:#000;
background:url('images/emailBackground.png') no-repeat;
display:block;
width:313px;
height:31px;
text-indent:-5000px;
position:relative;
top:0px;
left:-2px;
border:none;
}
input.emailBtn {
background:url('images/emailBtn.png') no-repeat;
display:block;
width:55px;
height:38px;
text-indent:-5000px;
position:relative;
top:-32px;
left:323px;
border:none;
}

I am at a total loss. Any help would be greatly appreciated.

Answer 1

Perhaps the text-indent:-5000px; is causing your text to be positioned out of the visible area.