[Solved] Form Input Size

[cybershot]

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?

[AshtonSanders]

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.

[cybershot]

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

[AshtonSanders]

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.)

[cybershot]

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

[AshtonSanders]

np. Glad it helped.

[Author]

Posts