Input Size VS Width

Input size vs width

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>

Input size attribute vs div width attribute

The size attribute sets the visible width in “characters”, and browsers interpret this differently. The ch unit, in supporting browsers, means the width of the digit 0, so it is defined very exactly, though it of course depends on the font. So these two ways of setting width are incommensurable.

To make a div element after an input element exactly as wide as the input element, the simplest way is to wrap them in a table with fixed layout. (Those who can’t bear with HTML tables can use a CSS table instead.) You don’t set the width of the div element at all in this approach; it gets its width from the table formatting. I have just set some content and a background color for it so that the width of the element is visible.

<table style="table-layout: fixed" cellspacing=0><tr><td><input type="text" readonly="yes" value="a" size="30" ID="b"><tr><td><div id="c" style="background: green">Hello world</div></table>

input size.. does not change the size of input field

How to correctly set the size of field?

In HTML5 You should be using CSS, however both size in the HTML and CSS rules will work, but the CSS will over-rule any size value given.

CSS has a special unit called the ch unit. (see here and here) which is valid in all current browsers (except Opera Mini).

Further, the character width default should be defined by a font-size CSS element somewhere in the DOM hierarchy.

input[type=text]{  /* Set width to 40characters */  width: 40ch;  /* prevent overflow of container */  max-width: 100%; }

<input class="w3-input w3-border" name="lastName" type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for last names.." title="Type in a last name">

input width vs textarea width

The native padding for text input elements differ. You will need to assign a different width to input elements and textarea elements and experiment.

#form input.textfield { width:10em; }
#form textarea { width:9em; }

Just throw some default styles ( I prefer ems ) and pop open Firebug and experiment by changing the size values.

I usually throw a class=textfield on <input type=text> so I don't target <input type=submit> or similar.

Specify width of 3 chars for an html input text

Not reliably, since l and W have very different widths.

However, if you set the font to monospace, that helps. Then, you should be able to set size="3" on the input element, and in theory it should be exactly three characters wide.

How can the size of an input text box be defined in HTML?

You could set its width:

<input type="text" id="text" name="text_name" style="width: 300px;" />

or even better define a class:

<input type="text" id="text" name="text_name" class="mytext" />

and in a separate CSS file apply the necessary styling:

.mytext {
    width: 300px;
}

If you want to limit the number of characters that the user can type into this textbox you could use the maxlength attribute:

<input type="text" id="text" name="text_name" class="mytext" maxlength="25" />

How to set input[type= text ] width and height so it corresponds to standard width and height of block elements?

This is because of default padding: 1px 2px on text inputs. Just set padding: 0px

*
{
    margin-top: 10px;
    font-size: 16px;
    text-align: center;
    border: 0;
    
    padding: 0px;
  
    width: 100px;
    height: 50px;
}

input
{
    background-color: coral;
}

button
{
    background-color: lightblue;
}

div
{
    background-color: lightgreen;
}

<input type="text" placeholder="a">
<button>a</button>
<div>a</div>

Adjust width of input field to its input

It sounds like your expectation is that the style be applied dynamically to the width of the textbox based on the contents of the textbox. If so you will need some js to run on textbox contents changing, something like this:

<input id="txt" type="text" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';">

Note: this solution only works when every character is exactly 8px wide. You could use the CSS-Unit "ch" (characters) which represents the width of the character "0" in the chosen font. You can read about it here.

Can CSS over-rule HTML input size declarations

OK, I think I've got it:

The table elements are set to take a percentage size but the nature of tables is that they expand to fit their contents, and the contents is set to take a maximum of 100% of the table size, so:

Size sets input elements size:
Table cell expands to encase input element
CSS input sets the input to fill table cell

So; Using a Viewport Width as a value gives a more absolute container for the size to sit into.

#centralTable input, #centralTable textarea, #centralTable select {
    max-width:65vw;
}

This limiter, rather than a percentage limiter, then correctly resizes the child input size value.

Viewport width units should be used in preference to percentage sizes.

Input Size VS Width