Input size vs width

Question

lt input name  txtId  type  text  size  20    gt    or   lt input name  txtId  type  text  style  width  150px     gt    Which one is optimal cross-browser code   Of course it depends on requirements  but I m curious to know how people decide and on what basis

User · Answer

I just got through fighting with a table that I couldn't make any smaller no matter which element I tried to make smaller the width of the table stayed the same. I searched using firebug but couldn't find the element that was setting the width so high.

Finally I tried changing the size attribute of the input text elements and that fixed it. For some reason the size attribute over-rode the css widths. I was using jQuery to dynamically add rows to a table and it was these rows that contained the inputs. So perhaps when it comes to dynamically adding inputs using the appendTo() function maybe it is better to set the size attribute along with the width.

User · Answer

You can resize using style and width to resize the textbox  Here is the code for it    x000D   x000D   lt  DOCTYPE html gt  x000D   lt html lang  en  gt  x000D   lt head gt  x000D       lt meta charset  UTF-8  gt  x000D   x000D   lt  head gt  x000D   lt body gt  x000D   lt div align  center  gt  x000D   x000D       lt form method  post  gt  x000D             lt div class  w3-row w3-section  gt  x000D               lt div class  w3-rest  align    center  gt  x000D                   lt input name  lastName  type  text  id  myInput  style  width  50   gt  x000D               lt  div gt  x000D           lt  div gt  x000D       lt  form gt  x000D   lt  div gt  x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D    Use align to center the textbox

User · Answer

I want to say this goes against the  conventional wisdom   but I generally prefer to use size  The reason for this is precisely the reason that many people say not to  the width of the field will vary from browser to browser  depending on font size  Specifically  it will always be large enough to display the specified number of characters  regardless of browser settings    For example  if I have a date field  I typically want the field wide enough to display either 8 or 10 characters  two digit month and day and either two or four digit year  with separators   Setting the size attribute essentially guarantees me that the entire date will be visible  with minimal wasted space  Similarly for most numbers - I know the range of values expected  so I ll set the size attribute to the proper number of digits  plus decimal point if applicable   As far as I can tell  no CSS attribute does this  Setting a width in em  for example  is based off the height  not the width  and thus is not very precise if you want to display a known number of characters   Of course  this logic doesn t always apply - a name entry field  for example  could contain any number of characters  In those cases I ll fall back to CSS width properties  typically in px  However  I would say the majority of fields I make have some sort of known content  and by specifying the size attribute I can make sure that most of the content  in most cases  is displayed without clipping

User · Answer

size is inconsistent across different browsers and their possible font settings   The width style set in px will at least be consistent  modulo box-sizing issues  You might also want to set the style in    em    if you want to size it relative to the font  though again  this will be inconsistent unless you set the input s font family and size explicitly   or         if you are making a liquid-layout form  Either way  a stylesheet is probably preferable to the inline style attribute   You still need size for  lt select multiple gt  to get the height to line up with the options properly  But I d not use it on an  lt input gt

User · Answer

Both the size attribute in HTML and the width property in CSS will set the width of an  lt input gt   If you want to set the width to something closer to the width of each character use the   ch   unit as in   input       width  10ch

User · Answer

I suggest  probably best way is to set style s width in em unit    So for input size of 20 characters just set style  width 20em

User · Answer

You can use both  The css style will override the size attribute in browsers that support CSS and make the field the correct width  and for those that don t  it will fall back to the specified number of characters   Edit  I should have mentioned that the size attribute isn t a precise method of sizing  according to the HTML specification  it should refer to the number of characters of the current font the input will be able to display at once    However  unless the font specified is a fixed-width monospace font  this is not a guarantee that the specified number of characters will actually be visible  in most fonts  different characters will be different widths  This question has some good answers relating to this issue   The snippet below demonstrates both approaches    x000D   x000D   font-face   x000D      font-family   Diplomata   x000D      font-style  normal  x000D      font-weight  400  x000D      src  local  Diplomata    local  Diplomata-Regular    url https   fonts gstatic com s diplomata v8 8UgOK RUxkBbV-q561I6kFtXRa8TVwTICgirnJhmVJw woff2  format  woff2    x000D      unicode-range  U 0000-00FF  U 0131  U 0152-0153  U 02C6  U 02DA  U 02DC  U 2000-206F  U 2074  U 20AC  U 2212  U 2215  x000D    x000D   font-face   x000D      font-family   Open Sans Condensed   x000D      font-style  normal  x000D      font-weight  300  x000D      src  local  Open Sans Condensed Light    local  OpenSansCondensed-Light    url https   fonts gstatic com s opensanscondensed v11 gk5FxslNkTTHtojXrkp-xBEur64QvLD-0IbiAdTUNXE woff2  format  woff2    x000D      unicode-range  U 0000-00FF  U 0131  U 0152-0153  U 02C6  U 02DA  U 02DC  U 2000-206F  U 2074  U 20AC  U 2212  U 2215  x000D    x000D  p   x000D    margin  0 0 10px 0  x000D    x000D  input   x000D    font-size  20px  x000D    x000D   narrow-font   x000D    font-family   Open Sans Condensed   sans-serif  x000D    x000D   wide-font   x000D    font-family   Diplomata   cursive  x000D    x000D   set-width   x000D    width  220px  x000D    x000D   lt p gt  x000D     lt input type  text  size  10  class  narrow-font  value  0123456789    gt  x000D   lt  p gt  x000D   lt p gt  x000D     lt input type  text  size  10  class  wide-font  value  0123456789    gt  x000D   lt  p gt  x000D   lt p gt  x000D     lt input type  text  size  10  class  narrow-font set-width  value  0123456789    gt  x000D   lt  p gt  x000D   lt p gt  x000D     lt input type  text  size  10  class  wide-font set-width  value  0123456789    gt  x000D   lt  p gt  x000D   x000D   x000D

User · Answer

HTML controls the semantic meaning of the elements  CSS controls the layout style of the page  Use CSS when you are controlling your layout   In short  never use size

User · Answer

You ll get more consistency if you use width  your second example

[html] Input size vs width

Examples related to html

Examples related to css