Unable to set textarea width with CSS

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

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

Answer 3

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 4

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.