PRB: Size Attribute Does Not Control the Width of <INPUT> Text Element

View products that this article applies to.

This article was previously published under Q272315

Symptoms

When you use the size attribute to control the width of a textbox (

Cause

The size attribute specifies how many characters to display, not the overall width of the element. The width of the element is determined by a combination of the size attribute, font, and font size that are set by the page. If you do not specify the font, the default font that is selected for the browser is used to determine the width. Even if you specify the font and font size for the page, you cannot guarantee consistent widths, because different users may have different versions of the same font installed.

↑ Back to the top

Resolution

The best way to ensure the width of an input element is to specify the width of the element either in pixels:

or by a percentage:

NOTE: The percentage is relative to the container of the element.

↑ Back to the top

More information

Steps to Reproduce Behavior

Paste the following HTML code in a new .htm file:

<HTML>
 <HEAD>
  <SCRIPT LANGUAGE=JavaScript>

   function showWidth()
    {
      var str  = "Input box width: " + test.clientWidth + "px.";
      str += "<br>Font: " + test.currentStyle.fontFamily;
      alert(str);
    }

  </SCRIPT>
 </HEAD>

 <BODY onload=showWidth()>

  <INPUT id="test" type="text" size="10" style="font-family:arial;font-size:10">

 </BODY>
</HTML>