CSS and form input:text not showing input text

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.

jeffjenx · Accepted Answer · 2012-06-26 20:28:02Z

3

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

answered Jun 26, 2012 at 20:28

jeffjenx

17.6k6 gold badges63 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ricardo Deano Over a year ago

Further to this, use IE dev tools or Firebug in Firefox to inspect the CSS. You can then remove the indent to see if this is causing the problem.

Adam R Over a year ago

Thanks, This is exactly the problem. I looked at this at least 20 times and totally overlooked it every time. I had just pasted from another element where I had the text-indent:-5000px;. I will sheepishly walk away. Thanks for your help!

JAB · Accepted Answer · 2012-06-26 20:29:04Z

0

This is just as hunch, but I'm pretty sure your problem is text-indent:-5000px;. Considering your text input elements are much smaller in width than the value set there.

Also, just as a point of note:

http://luigimontanez.com/2010/stop-using-text-indent-css-trick/

So you don't want to use that anyway if you want your page to play nice with Google.

answered Jun 26, 2012 at 20:29

JAB

21.2k6 gold badges73 silver badges80 bronze badges

Collectives™ on Stack Overflow

CSS and form input:text not showing input text

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related