textarea s rows and cols attribute in CSS

Question

I d like to set the textarea s rows and cols attributes via CSS   How would I do this in CSS

User · Answer

lt textarea rows  quot 4 quot  cols  quot 50 quot  gt  lt  textarea gt   It is equivalent to  textarea       height  4em      width  50em     where 1em is equivalent to the current font size  thus make the text area 50 chars wide  see here

User · Answer

As far as I know  you can t   Besides  that isnt what CSS is for anyway  CSS is for styling and HTML is for markup

User · Answer

I don t think you can   I always go with height and width   textarea  width 400px  height 100px      the nice thing about doing it the CSS way is that you can completely style it up   Now you can add things like   textarea  width 400px  height 100px  border 1px solid  000000  background-color  CCCCCC

User · Answer

width and height are used when going the css route    lt  DOCTYPE html gt   lt html gt       lt head gt           lt title gt Setting Width and Height on Textareas lt  title gt           lt style gt               comments   width  300px  height  75px            lt  style gt       lt  head gt       lt body gt           lt textarea class  comments  gt  lt  textarea gt       lt  body gt   lt  html gt

User · Answer

I just wanted to post a demo using calc   for setting rows height  since no one did    x000D   x000D  body   x000D       page default    x000D    font-size  15px  x000D    line-height  1 5  x000D    x000D   x000D  textarea   x000D       demo related    x000D    width  300px  x000D    margin-bottom  1em  x000D    display  block  x000D     x000D       rows related    x000D    font-size  inherit  x000D    line-height  inherit  x000D    padding  3px  x000D    x000D   x000D  textarea border-box   x000D    box-sizing  border-box  x000D    x000D   x000D  textarea rows-5   x000D       height  calc font-size   line-height   rows      x000D    height  calc 1em   1 5   5   x000D    x000D   x000D  textarea border-box rows-5   x000D       height  calc font-size   line-height   rows   padding-top   padding-bottom   border-top-width   border-bottom-width      x000D    height  calc 1em   1 5   5   3px   3px   1px   1px   x000D    x000D   lt p gt height is 2 rows by default lt  p gt  x000D   x000D   lt textarea gt Lorem ipsum dolor sit amet  consectetur adipiscing elit  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua  Ut enim ad minim veniam  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur  Excepteur sint occaecat cupidatat non proident  sunt in culpa qui officia deserunt mollit anim id est laborum  lt  textarea gt  x000D   x000D   lt p gt height is 5 now lt  p gt  x000D   x000D   lt textarea class  rows-5  gt Lorem ipsum dolor sit amet  consectetur adipiscing elit  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua  Ut enim ad minim veniam  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur  Excepteur sint occaecat cupidatat non proident  sunt in culpa qui officia deserunt mollit anim id est laborum  lt  textarea gt  x000D   x000D   lt p gt border-box height is 5 now lt  p gt  x000D   x000D   lt textarea class  border-box rows-5  gt Lorem ipsum dolor sit amet  consectetur adipiscing elit  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua  Ut enim ad minim veniam  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur  Excepteur sint occaecat cupidatat non proident  sunt in culpa qui officia deserunt mollit anim id est laborum  lt  textarea gt  x000D   x000D   x000D    If you use large values for the paddings  e g  greater than 0 5em   you ll start to see the text that overflows the content -box  area  and that might lead you to think that the height is not exactly x rows  that you set   but it is  To understand what s going on  you might want to check out The box model and box-sizing pages

[css] textarea's rows, and cols attribute in CSS

Examples related to css

Examples related to styling