Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Feb 2009
    Posts
    68
    Thanks
    12
    Thanked 0 Times in 0 Posts

    How to style the actual text in an input?

    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

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,864
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Code:
    input{
    padding:2px;
    /* or padding-left:2px; */
    }
    
    /* Or to make specific */
    #fName{
    padding-left:2px;
    }
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    Feb 2009
    Posts
    68
    Thanks
    12
    Thanked 0 Times in 0 Posts
    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

  • #4
    New Coder
    Join Date
    Feb 2009
    Posts
    68
    Thanks
    12
    Thanked 0 Times in 0 Posts
    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

  • #5
    New Coder
    Join Date
    Feb 2009
    Posts
    68
    Thanks
    12
    Thanked 0 Times in 0 Posts
    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

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,864
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Can we have a link to your page Or your complete HTML+CSS ?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #7
    New Coder
    Join Date
    Feb 2009
    Posts
    68
    Thanks
    12
    Thanked 0 Times in 0 Posts
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •