web-dev-qa-db-ja.com

CSSで入力（テキスト）フィールドの高さを設定する方法は？

この質問には申し訳ありませんが、どこにも答えが見つからないようです。テキストボックスの高さを設定するCSSコードがあります。 VS2010 Express for Windows Phoneを使用し、HTML/CSS/Javascript/C＃でコーディングしています。

[〜＃〜] html [〜＃〜]

<input class="heighttext" type="text" id="name">

[〜＃〜] css [〜＃〜]

.heighttext{
  height:30px
}

高さは自由に設定できますが、テキストボックスは同じままです。助けてください、または少なくとも私にできるリンクを送ってください！

htmlcsstextfield
30
Arrie

paddingとline-height-

input[type="text"]{ padding: 20px 10px; line-height: 28px; }
44
Dipak

フォームコントロールは、クロスプラットフォーム/ブラウザのスタイル設定が難しいことで有名です。一部のブラウザはCSS heightルールを尊重しますが、そうでないブラウザもあります。

あなたが試すことができます line-height （必要があるかもしれません display:block;またはdisplay:inline-block;）またはtopおよびbottom paddingも。これらのどれも動作しない場合、それはほぼそれです-グラフィックを使用して、inputを中央に配置し、border:none;だからlooksフォームコントロールは大きいが、実際にはそうではない...

3
danwellman

高さの制御にはfont-sizeを使用する必要があります。これはブラウザ間で広くサポートされています。また、スペースを追加するには、パディングを使用する必要があります。例えば、

.inputField{
  font-size: 30px;
  padding-top: 10px;
  padding-bottom: 10px;
}
1
Rusty

入力フィールドでheightプロパティを使用しないでください。

例：

.heighttext{
    display:inline-block;
    padding:15px 10px;
    line-height:140%;
}

常にpaddingおよびline-height cssプロパティを使用します。すべてのモバイルデバイスとすべてのブラウザーに最適な機能。

1
HAPPY SINGH

このスタイルコードを使用します

.heighttext{
 float:right;
 height:30px;
 width:70px;
 }
0
Saeed