web-dev-qa-db-ja.com

どのようにhtmlテキストボックスの高さを増やしますか

テキストボックスの高さをどのように増やしますか？ （フォントサイズとともに）

htmltextbox
49
mrblah

ページのレンダリング後にサイズを変更したいという質問の言葉から推測していますか？

JavaScriptでは、 DOM CSSプロパティ を操作できます。例：

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

高さとフォントサイズを指定するだけの場合は、CSSまたはスタイル属性を使用します。

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

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

または

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

複数行のテキストボックスが必要な場合は、<textarea>の代わりに<input type="text">を使用する必要があることに注意してください。

25
Jan Aagaard

通常、テキストボックスのフォントサイズを大きくすると、そのサイズが自動的に拡大します。

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

フォントサイズに比例しない高さを設定する場合は、次のようなものを使用することをお勧めします。これにより、IEなどのブラウザーが、垂直方向の中央ではなく上部のテキストをレンダリングできなくなります。

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

「xx」を任意の値に置き換えてください。

4
user

  • インラインスタイルの場合：

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

  • または別のCSSを使用：

    HTML：

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

    CSS：

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

複数の行が必要な場合は、これを考慮してください。

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

必要に応じて行を指定します。

1
Gayan Dasanayake

height および font-size CSSプロパティは機能しませんか？

0
Cerebrus

CSSを使用：

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