Unable to set textarea width with 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 Fire

Answer 1

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 2

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 3

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

Answer 4

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 5

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;
}

Answer 6

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.