How to style the actual text in an input?

shelzmike · 11-14-2011, 03:57 PM

Hey all -

I am building a web form to practice some 2.0 styling - to push the envelope so to speak.

I have nice big, styled text inputs and have used an image as the background. This works fantastically.

My question is dealing with the actual text that gets entered. How do style the inner text of those inputs? The primary problem is that the starting point of the text being entered is pushed all the way to the left (default) and it looks horrible. I want to be able to add padding on the inside of the input so that the text has a little bit of whitespace on the left of it.

As an example, here is one of the textboxes:

Code:

<label for="fName">First Name</label>
<input type="text" name="fName" id="fName" />

Thanks!

Mike

abduraooft · 11-14-2011, 04:15 PM

Code:

input{
padding:2px;
/* or padding-left:2px; */
}

/* Or to make specific */
#fName{
padding-left:2px;
}

shelzmike · 11-14-2011, 05:16 PM

Thanks. I am an idiot for not even trying that first!

Quick question though - wouldn't that affect all of my inputs (if I simply style the input?). Do inputs accept classes? If so, then I know what to do.

Also, I did try the padding on the div itself, but it did not seem to work for some reason. It already has a margin applied for positioning of the actual input itself.

Mike

shelzmike · 11-14-2011, 05:27 PM

Okay, that does "work" but there is a problem. Instead of just padding the inside of the text input, it is actually padding the entire input, pushing it further to the right than it needs to be. Is there something I can do about that, or do I just need to modify the margin of the div to account for this?

Wow, that is kinda confusing - so here is how I have it setup:

I have the fName div styled as such:

Code:

#fName {
	margin-top: 42px;
	margin-left: 115px;
	background: url(../img/fName-input.jpg) no-repeat;
	width: 213px;	
	}

This also affects it:

Code:

#fName, #lName, #street, #city, #zip {
	height: 46px;
	font-size: 20px;
	font-family: Verdana, Geneva, sans-serif;
}

And my input is as follows:

Code:

input {
	padding-left: 10px;
}

The div style places the input exactly where I want in in relation to the HTML doc. However, adding the padding to the input actually "pushes" the div wider, which moves it to the right and consequently out of place.

Is there no way to pad the input text relative to the textbox input itself?

Thanks!

Mike

shelzmike · 11-14-2011, 05:34 PM

Okay, looks like I got it resolved. Apparently, as far as I know anyway, the only way I could do it was by manipulating the width of the div (subtracting 10), adding 10 px of padding-right to the label (to be sure the text doesn't spill outside the bg image) and reducing the width of the fName div.

It didn't take but about 30 seconds, but looks fantastic now. Thanks for, pointing me in the right direction.

Please though - to you or anyone else - if there is another way to do this that is better, let me know. Thanks!

Mike

abduraooft · 11-15-2011, 01:25 PM

Can we have a link to your page Or your complete HTML+CSS ?

shelzmike · 11-15-2011, 04:31 PM

Well, it is not on a server (internet side anyway) - still on the dev side right now. However, the fixes that I listed above solved the problem. Since this is just a project for class, I am not completely worried about if this is the "best way" as I am not even getting graded on the HTML, I am getting graded on the scripting, so I decided last night it is "good enough"

. If it were to be launched and used, then it would be a different story. Thanks again!

Mike