Unable to set textarea width with CSS - css

Question

I have attempted to use this CSS to set the width of my form elements:
input[type="text"], textarea { width:250px; }
If you look at this Firefox screenshot you'll see that the fields are not the same width. I get a similar effect in Safari.
alt text http://screamingv.com/ss.png
Are there any workarounds?
UPDATE: Thanks for the info so far. I've now made sure padding/margin/border on both elements are set the same. I was still having the problem. The original CSS I posted was simplified... I was also setting the height of the textarea to 200px. When I remove the height styling, the widths match. Weird. That makes no sense.
Browser bug?

Answer 1

Try removing padding and borders. Or try making them the same for both elements
input[type="text"],
textarea {
width:250px;
padding: 3px;
border: none;
}
Or:
input[type="text"],
textarea {
width:250px;
padding: 0;
border: 1px solid #ccc;
}
INPUT and TEXTAREA elements often have some padding applied by the browser (varies by browser) and this can make things appear effectively wider than the assigned width.
UPDATE: also box-sizing: border-box; is a handy way to set widths that that padding and border will eat into rather than add onto. See: http://www.paulirish.com/2012/box-sizing-border-box-ftw/

Answer 2

This answer is three years late, but I'm posting it here just in case anyone else is trying to set the width in em's and not pixels and comes across this post (as I just did). Make sure the font-size is the same,
e.g.
input, textarea {
font-size:12px;
width:20em;
padding:0;
margin:0
}
otherwise the textarea may be a different size (true on FF12).

Answer 3

Try border:0; or border: 1px solid #000;

Answer 4

This is probably caused by different default margins on the <input> and <textarea> elements. Try using something like this.
input[type="text"], textarea {
padding: 0;
margin: 0;
width:250px;
}

Answer 5

I was struggling with this kind of problem too, and this question was the first result of my googling. What finally worked for me was setting box-sizing: content-box for the textarea - Drupal 7 defaults this to border-box which causes the padding and border width to be subtracted from the size of the textarea.

Answer 6

Set width 100% and then use max-width:
textarea {
width:100%;
max-width:250px;
}
// removed margin and padding, you can add it if you want.

Answer 7

Maybe you have a user specific css overlay defined somewhere in your browser, because i just tested it and it works as expected: http://jsbin.com/exase/edit
(Tested on windows. Maybe Apple native widgets have some quirk?)

Answer 8

you may use:
input[type="text"], textarea {
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}