Should I size a textarea with CSS width height or HTML cols rows attributes

Question

Every time I develop a new form that includes a textarea I have the following dilemma when I need to specify its dimensions   Use CSS or use the textarea s attributes cols and rows   What are the pros and cons of each method   What are the semantics of using these attributes   How is it usually done

User · Answer

According to the w3c  cols and rows are both required attributes for textareas   Rows and Cols are the number of characters that are going to fit in the textarea rather than pixels or some other potentially arbitrary value   Go with the rows cols

User · Answer

For text area we can use below css to fix size        lt textarea  class  form-control  style   min-width 500px  max-width 100  min-height 50px height 100  width 100     gt  lt  textarea gt    Tested in angularjs and angular7

User · Answer

CSS  input       width  300px      height  40px       HTML   lt textarea rows  quot 4 quot  cols  quot 50 quot  gt HELLO lt  textarea gt

User · Answer

lt textarea style  width 300px  height 150px    gt  lt  textarea gt

User · Answer

if you dont use  every time use  line-height       property its control the height of textarea and width property for width of textarea   or you can make use of  font-size by following css    sbr     font-size  16px    line-height 1 4    width 100

User · Answer

The size of a textarea can be specified by the cols and rows attributes  or even better  through CSS  height and width properties  The cols attribute is supported in all major browsers  One main difference is that  lt TEXTAREA     gt  is a container tag  it has a start tag

User · Answer

YES     always style textarea using CSS and avoid the attributes  unless you need to support some very old agent that does not support style sheets  Otherwise  you have full power to use CSS  Below is my default CSS formatting for textarea that looks beautiful in any website  Customize it as you like  Comments are included below so you can see why I chose those CSS properties and values  textarea       display  inline-block      margin  0      padding   2em      width  auto      min-width  30em         The max-width  quot 100  quot  value fixes a weird issue where width is too wide by default and extends beyond 100  of the parent in some agents         max-width  100          Height  quot auto quot  will allow the text area to expand vertically in size with a horizontal scrollbar if pre-existing content is added to the box before rendering  Remove this if you want a pre-set height  Use  quot em quot  to match the font size set in the website         height  auto         Use  quot em quot  to define the height based on the text size set in your website and the text rows in the box  not a static pixel value         min-height  10em         Do not use  quot border quot  in textareas unless you want to remove the 3D box most browsers assign and flatten the box design           border  1px solid black        cursor  text         Some textareas have a light gray background by default anyway         background-color   eee         Overflow  quot auto quot  allows the box to start with no scrollbars but add them as content fills the box         overflow  auto         Resize creates a tab in the lower right corner of textarea for most modern browsers and allows users to resize the box manually  Note  Resize isn t supported by most older agents and IE         resize  both     In my  quot reset quot  element style sheet I set these values as defaults for  quot textarea quot  by default  which give all your textareas a nice look and feel with scrolling when detected  a resizing tab  non-IE browsers   and fixes for dimensions  including a height that allows the box to size itself based on existing content you put in it for the user and a width that does not break out beyond its parent containers limitations

User · Answer

HTML rows and cols are not responsive    So I define the size in CSS  As a tip  if you define a small size for mobiles think about using textarea focus      Add some extra space here  which will only unfold the moment a user wants to actually write something

User · Answer

The answer is  yes   That is  you should use both  Without rows and cols  and there are default values even if you don t use them explicitly  the textarea is unusably small if CSS is disabled or overriden by a user stylesheet  Always keep accessibility concerns in mind  That being said  if your stylesheet is allowed to control the appearance of the textarea  you will generally wind up with something that looks a whole lot better  fits into the overall page design well  and that can resize to keep up with user input  within the limits of good taste  of course

User · Answer

I usually don t specify height  but do specify width      and rows and cols   Usually  in my cases  only width and rows are needed  for the textarea to look nice in relation to other elems   And cols is a fallback if someone doesn t use CSS  as explained in the other answers      Specifying both rows and height feels a little bit like duplicating data I think

User · Answer

A major feature of textareas is that they are expandable  On a web page this can result in scroll bars appearing on the text area if the text length overfills the space you set  be that using rows  or be that using CSS  That can be a problem when a user decides to print  particularly with  printing  to PDF - so set a comfortably large min-height for printed textareas with a conditional CSS rule    media print    textarea   min-height  900px

User · Answer

I recommend to use both  Rows and cols are required and useful if the client does not support CSS  But as a designer I overwrite them to get exactly the size I wish    The recommended way to do it is via an external stylesheet e g    x000D   x000D  textarea   x000D    width  300px  x000D    height  150px  x000D    x000D   lt textarea gt   lt  textarea gt  x000D   x000D   x000D

User · Answer

x000D   x000D  textarea   height  auto    x000D   lt textarea rows  10  gt  lt  textarea gt  x000D   x000D   x000D    This will trigger the browser to set the height of the textarea EXACTLY to the amount of rows plus the paddings around it  Setting the CSS height to an exact amount of pixels leaves arbitrary whitespaces

[html] Should I size a textarea with CSS width / height or HTML cols / rows attributes?

Examples related to html

Examples related to css

Examples related to textarea