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

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

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.