CODEWITHSUNDEEP
htmlcsstextfield
Arrie
Arrie

Reputation: 1337

How to set the height of an input (text) field in CSS?

Sorry for this question but I can't seem to find an answer anywhere. I have CSS code that should set the height of my text box. I am using VS2010 Express for Windows phone, coding in HTML/CSS/Javascript/C#.

HTML

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

CSS

.heighttext{
  height:30px
}

I can set the height to anything I like, but the text box will stay the same! Please help, or at least send me a link that can!

Upvotes: 56

Views: 231652

Answers (6)

Ravi Kumar Yadav
Ravi Kumar Yadav

Reputation: 339

The best way to do this is:

input.heighttext{
  padding: 20px 10px;
  line-height: 28px;
}

Upvotes: 2

HAPPY SINGH
HAPPY SINGH

Reputation: 586

Don't use height property in input field.

Example:

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

Always use padding and line-height css property. Its work perfect for all mobile device and all browser.

Upvotes: 3

Rusty
Rusty

Reputation: 4473

You should use font-size for controlling the height, it is widely supported amongst browsers. And in order to add spacing, you should use padding. Forexample,

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

Upvotes: 4

danwellman
danwellman

Reputation: 9253

Form controls are notoriously difficult to style cross-platform/browser. Some browsers will honor a CSS height rule, some won't.

You can try line-height (may need display:block; or display:inline-block;) or top and bottom padding also. If none of those work, that's pretty much it - use a graphic, position the input in the center and set border:none; so it looks like the form control is big but it actually isn't...

Upvotes: 7

Saeed
Saeed

Reputation: 3775

You use this style code

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

Upvotes: -1

Dipak
Dipak

Reputation: 12190

Try with padding and line-height - 

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

Upvotes: 75

Related Questions