Il carattere predefinito per Multiline Textbox è diverso da Singleline Textbox?

Question

Ho un paio di controlli Textbox nella mia pagina. Alcuni sono multilinea e altri sono singleline. Ho notato che i caratteri predefiniti tra le multilinea e le caselle di testo di Singleline sono diversi. Qualcuno sa perché? Come faccio a renderli lo stesso font? Grazie.

Ecco l'esempio:

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

Il tipo di carattere per TextBox1 è MS Shell Dlg, il carattere per TextBox2 è spaziatura fissa.

Answer 1

Selettore stile 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> 

noti che l'attributo media non è necessaria, ma il comportamento dei campi di input può variare ampiamente a seconda della destinazione di rendering (ad esempio stampante contro schermo). Per i media dello schermo, lo stile dovrebbe incoraggiare l'input; per la stampa, lo stile può essere diverso poiché una pagina stampata è (ovviamente) non modificabile.

Per quanto riguarda "perché" i tipi di carattere predefiniti sono diversi, TEXTAREAs erano storicamente dimensionati utilizzando colonne e righe. Un font a larghezza fissa (come la monospazio) consente di controllare il numero di caratteri in una riga, che è probabilmente il motivo per cui la maggior parte dei browser usa un font a larghezza fissa per il TEXTAREA per impostazione predefinita.

Assegnazione di una classe CSS tramite un tema (solo ASP.NET)

Nel file tema, aggiungere una voce nel seguente modo:

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

Ciò si applica la classe "myClassName "a tutte le caselle di testo a cui si applica il tema.

Answer 2

Se si utilizza un foglio di stile, è necessario assicurarsi di non avere un set di caratteri specifico per l'area di testo che differisce dalla casella di testo a riga singola. Sarebbe simile al seguente,

text area 
{ 
    font-size:10px; 
} 

Answer 3

Impostare uno stile di carattere ad esso: 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> 

Buona fortuna!