Input size vs width

by

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.

@font-face {
    font-family: 'Diplomata';
    font-style: normal;
    font-weight: 400;
    src: local('Diplomata'), local('Diplomata-Regular'), url(https://fonts.gstatic.com/s/diplomata/v8/8UgOK_RUxkBbV-q561I6kFtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
    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;
}
@font-face {
    font-family: 'Open Sans Condensed';
    font-style: normal;
    font-weight: 300;
    src: local('Open Sans Condensed Light'), local('OpenSansCondensed-Light'), url(https://fonts.gstatic.com/s/opensanscondensed/v11/gk5FxslNkTTHtojXrkp-xBEur64QvLD-0IbiAdTUNXE.woff2) format('woff2');
    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;
}
p {
  margin: 0 0 10px 0;
}
input {
  font-size: 20px;
}
.narrow-font {
  font-family: 'Open Sans Condensed', sans-serif;
}
.wide-font {
  font-family: 'Diplomata', cursive;
}
.set-width {
  width: 220px;
}
<p>
  <input type="text" size="10" class="narrow-font" value="0123456789" />
</p>
<p>
  <input type="text" size="10" class="wide-font" value="0123456789" />
</p>
<p>
  <input type="text" size="10" class="narrow-font set-width" value="0123456789" />
</p>
<p>
  <input type="text" size="10" class="wide-font set-width" value="0123456789" />
</p>

More Related Contents:

  1. How to align 3 divs (left/center/right) inside another div?
  2. Styling an input type=”file” button
  3. Why does z-index not work?
  4. CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue
  5. :after and :before CSS pseudo elements hack for Internet Explorer 7
  6. Percent pie chart with css only
  7. Extend bootstrap row outside the container
  8. html/css hexagon with image inside
  9. Margin top in inline element
  10. CSS image resize issue
  11. Inline tags vs. inline css properties
  12. Remove border from IFrame
  13. Why are my div margins overlapping and how can I fix it?
  14. Draw triangle in corner of div
  15. How to center content in a Bootstrap column?
  16. Flexbox resize and scrollable overflow [duplicate]
  17. Why is a trailing punctuation mark rendered at the start with direction:rtl?
  18. How to prevent line break at hyphens in all browsers
  19. Can I override inline !important?
  20. CSS property as SASS mixin value [duplicate]
  21. Preserve line breaks in textarea
  22. How position absolute and fixed block elements get their dimension?
  23. Ring-shaped process spinner with fading gradient effect around the ring
  24. Why is there a default margin on the element? [closed]
  25. set css border to end in a 90 instead of a 45 degree angle
  26. extra space when centering elements using flexbox
  27. Img’s max-height not respecting parent’s dimensions
  28. backdrop-filter not working for nested elements in Chrome
  29. display: flex not working on Internet Explorer [duplicate]
  30. Fitting child into parent

Leave a Comment