web-dev-qa-db-fra.com

comment augmenter la hauteur d'une zone de texte html

Comment augmenter la hauteur d'une zone de texte? (avec sa taille de police)

htmltextbox
47
mrblah

D'après votre formulation de la question, je suppose que vous souhaitez modifier la taille après le rendu de la page?

En Javascript, vous pouvez manipuler les propriétés DOM CSS , par exemple:

document.getElementById('textboxid').style.height="200px";
document.getElementById('textboxid').style.fontSize="14pt";

Si vous souhaitez simplement spécifier la hauteur et la taille de la police, utilisez des attributs CSS ou de style, par exemple.

//in your CSS file or <style> tag
#textboxid
{
    height:200px;
    font-size:14pt;
}

<!--in your HTML-->
<input id="textboxid" ...>

Ou

<input style="height:200px;font-size:14pt;" .....>
44
Paul Dixon

Notez que si vous souhaitez une zone de texte multiligne, vous devez utiliser un <textarea> au lieu d'un <input type="text">.

24
Jan Aagaard

L'augmentation de la taille de la police dans une zone de texte étend généralement sa taille automatiquement.

<input type="text" style="font-size:16pt;">

Si vous souhaitez définir une hauteur non proportionnelle à la taille de la police, nous vous recommandons d'utiliser l'une des solutions suivantes. Cela empêche les navigateurs tels que IE de restituer le texte en haut au lieu de le centrer verticalement.

.form-text{
    padding:15px 0;
}
7
Sam152
<input type="text" style="font-size:xxpt;height:xxpx">

Il suffit de remplacer "xx" par les valeurs de votre choix.

4
user

  • Avec style en ligne:

    <input type="text" style="font-size: 18pt; height: 40px; width:280px; ">

  • ou avec CSS séparé:

    HTML:

    <input type="text" id="txtbox">

    CSS:

    #txtbox {
    font-size: 18pt;
    height: 42px;
    width : 300px;
}
1
Janarthanan Ramu

Les propriétés height et font-size CSS ne fonctionnent-elles pas pour vous?

0
Cerebrus

Utiliser CSS:

<html>
<head>
<style>
.Large
{
    font-size: 16pt;
    height: 50px;
}
</style>
<body>
<input type="text" class="Large">
</body>
</html>
0
James

Si vous voulez plusieurs lignes, considérez ceci:

<textarea rows="2"></textarea>

Spécifiez les lignes si nécessaire.

0
Gayan Dasanayake