Grow your CSS skills. Land your dream job.

[Solved] Form Input Size

  • # November 20, 2009 at 7:53 pm

    I set a custom background for the input on my form and changed the length, but the characters that are entered exceed the background image, no I thought I could change the size of the input box by doing

    input { width: 200px; }

    but it’s not working. any ideas?

    # November 20, 2009 at 7:57 pm

    What’s not working? You didn’t give a link, so can you explain what it’s doing exactly?

    for testing purposes, give your inputs a {border: 1px solid #0f0 } so you can see where they are and where the background images are.

    # November 20, 2009 at 8:17 pm

    well the issue is that i set the input field to border: none to hide the input fields. Then set my own custom background input field using css. The applied some padding to get the text into the center of the input field and 10 pix from the left side. But when I add padding to the right, instead of pushing the text to the left to make it fit into the background border, which is what I thought it should have done, it makes the input box bigger on the right allowing the text to run out of the borders of the custom input background

    # November 20, 2009 at 11:55 pm

    I almost guessed that.

    The width of an HTML element = left padding + width + right padding

    So if you want a box to be 200 px wide with 10px of padding on both sides, give it a width of 180px.

    (The same goes for height.)

    # November 21, 2009 at 12:47 am

    LOL, simple sollution. I must be working to hard. Thanks, that did the trick.

    # November 21, 2009 at 1:29 am

    np. Glad it helped.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".