The default font for Multiline Textbox is different from singleline Textbox?

Question

I have couple of Textbox controls in my page. Some are multilines and others are singleline. I notice the default fonts between multilines and singleline Textboxes are different. Anybody knows why? How do I make them the same font? Thanks.

Here is the sample:

   <asp:TextBox ID="TextBox1" runat="server">hello</asp:TextBox>
   <asp:TextBox ID="TextBox2" runat="server" TextMode="MultiLine">hello</asp:TextBox>

The font for TextBox1 is MS Shell Dlg, the font for TextBox2 is monospace.

Answer 1

Style Selector for CSS

<style type="text/css" media="screen">

    /* match all single/multiline textboxes (IE 7+ for the attribute selector) */
    TEXTAREA, INPUT[type="text"]
    {
        /* font size, line height, face */
        font: 11px/1.5 "Trebuchet MS", Arial, Verdana, sans-serif;

        /* useful for supporting 100% width inclusive of padding and border */
        box-sizing: border-box; 
    }

</style>

Note that the media attribute is not required but the behavior of input fields can vary widely depending on the rendering target (e.g. printer versus screen). For screen media, the style should encourage input; for print, the style may be different since a printed page is (obviously) not editable.

As to "why" the default fonts are different, TEXTAREAs were historically sized using columns and rows. A fixed-width font (like monospace) makes it possible to control the number of characters in a row, which is probably why most browsers use a fixed-width font for the TEXTAREA by default.

Assigning a CSS Class via a Theme (ASP.NET only)

In your theme file, add an entry in the following manner:

<asp:TextBox runat="server" CssClass="myClassName"></asp:TextBox>

This will apply the class "myClassName" to all textboxes to which the theme applies.

Answer 2

Set a font style to it: CSS:

<style type="text/css">
    .text
    {
        font-family:Verdana;
        font-weight:bold;
    }
</style>

HTML:

<asp:TextBox  CssClass="text" ID="TextBox1" runat="server" Height="196px" TextMode="MultiLine" 
    Width="271px"></asp:TextBox>

Good luck!