HTML textarea と input type="text" を (ほぼ) 等しい幅 (ピクセル単位) でレンダリングして、さまざまなブラウザーで機能する簡単な方法はありますか?
CSS/HTML ソリューションはすばらしいでしょう。Javascriptを使用する必要はありません。
ありがとう/エリック
54315 次
12 に答える
16
あなたは使用できるはずです
.mywidth {
width: 100px;
}<input class="mywidth">
<br>
<textarea class="mywidth"></textarea>于 2008-08-26T17:56:11.327 に答える
5
最初の質問に答えるには (とはいえ、答えは死んでいます): CSS の幅が必要です。
しかし、私は回答でガイウスの質問に答えたかった. Gaius、あなたの問題は、幅を全角で設定していることです。これは良い考えですが、em はフォント サイズに基づいていることを覚えておく必要があります。デフォルトでは、入力エリアとテキストエリアは異なるフォントフェイスとサイズを持っています。したがって、幅を 35em に設定すると、入力領域はフォントの幅を使用し、テキスト領域はフォントの幅を使用します。テキスト領域のデフォルト フォントが小さいため、テキスト ボックスも小さくなります。幅をピクセルまたはポイント単位で設定するか、入力ボックスとテキストエリアのフォントとサイズが同じであることを確認します。
.mywidth {
width: 35em;
font-family: Verdana;
font-size: 1em;
}<input type="text" class="mywidth"/><br/>
<textarea class="mywidth"></textarea>それが役立つことを願っています。
于 2008-08-28T15:33:01.200 に答える
4
他の誰かがこれに言及し、その後削除しました。クラスを使用せずにすべてのテキストエリアとテキスト入力を同じ方法でスタイル設定する場合は、次の CSS を使用します (IE6 では機能しません)。
input[type=text], textarea { width: 80%; }
于 2008-08-26T18:09:22.090 に答える
3
CSS3 を使用して、テキストボックスと入力が同じように機能するようにします。jsFiddleを参照してください。
.textarea, .textbox {
width: 200px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
于 2014-06-11T04:50:29.683 に答える
3
これは CSS に関する質問です。幅にはボーダーとパディングの幅が含まれており、ブラウザごとに INPUT と TEXTAREA のデフォルトが異なるため、それらも同じにします。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>width</title>
<style type="text/css">
textarea, input { padding:2px; border:2px inset #ccc; width:20em; }
</style>
</head>
<body>
<p><input/><br/><textarea></textarea></p>
</body>
</html>
これについては、CSS 仕様のボックスの寸法セクションで次のように説明されています。
ボックスの幅は、左右のマージン、ボーダー、パディング、およびコンテンツの幅の合計によって決まります。
于 2008-08-26T18:59:54.980 に答える
1
はいあります。次のようにしてみてください。
<textarea style="width:80%"> </textarea>
<input type="text" style="width:80%" />
どちらも同じサイズにする必要があります。絶対サイズ (px)、相対サイズ (em)、またはパーセンテージ サイズで行うことができます。
于 2008-08-26T17:56:25.973 に答える
0
UnequalHtmlテキストボックスとXHTML1.0strictのドロップダウン幅で述べたように、それはDoctypeにも依存します。XHTML 1.0 strictを使用すると、幅の違いが実際に表示されることに気づきました。
于 2008-10-03T14:24:37.663 に答える
0
input[type="text"] { width: 60%; }
input[type="email"] { width: 60%; }
textarea { width: 60%; }
textarea { height: 40%; }
于 2014-07-24T15:29:51.670 に答える
0
ただ注意してください - 幅は常にクライアント側で起こっていることの影響を受けます - PHP はそのようなことには影響しません。
要素に共通のクラスを設定し、CSS で幅を設定するのが最も確実な方法です。
于 2008-08-26T18:01:35.540 に答える
0
幅に CSS クラスを使用し、要素を HTML DIV に配置します。DIV は前述のクラスを持ちます。
このようにして、レイアウト制御全体が改善されるはずです。
于 2008-08-26T18:39:06.263 に答える
0
最近、ブートストラップを使用する場合は、入力フィールドにform-controlクラスを与えるだけです。何かのようなもの：
<label for="display-name">Display name</label>
<input type="text" class="form-control" name="displayname" placeholder="">
<label for="about-me">About me</label>
<textarea class="form-control" rows="5" id="about-me" name="aboutMe"></textarea>
于 2018-05-12T18:35:05.883 に答える
-1
次の CSS も使用できます。
.mywidth{
width:100px;
}
textarea{
width:100px;
}
HTML:
<input class="mywidth" >
<textarea></textarea>
于 2013-07-23T13:32:26.023 に答える