55

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!

Flip
  • 6,233
  • 7
  • 46
  • 75
Arrie
  • 1,327
  • 5
  • 18
  • 39

6 Answers6

72

Try with padding and line-height - 

input[type="text"]{ padding: 20px 10px; line-height: 28px; }
Dipak
  • 11,930
  • 1
  • 30
  • 31
  • @Dipkas this worked very well for me!, but may i ask you why the padding have 2 properties? and which one should i change to get it a bit smaller? you really helped me out! – Arrie Oct 15 '12 at 10:11
  • 3
    @Arrie This is a short hand to padding: 20px 10px 20px 10px; /*top right bottom left*/ and with two values padding: 20px 10px; /* top-bottom left-right*/... hope this is clear :) – Dipak Oct 15 '12 at 10:16
  • 1
    He wanted a height of 30px. How does a top/bottom padding of 20 plus a line height of 28 get to a total height of 30? – claudekennilol Apr 27 '20 at 20:14
  • I also don't get how this is the answer. Wouldn't this lead to a height of 2 * 20 + 28? – alaboudi May 14 '20 at 02:49
7

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...

danwellman
  • 9,068
  • 8
  • 60
  • 88
4

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;
}
Rusty
  • 4,138
  • 3
  • 37
  • 45
  • `font-size` is only relevant when you want to increase the font size of the input. Sometimes you don't want that side effect. – Hashim Aziz Jun 13 '23 at 00:02
3

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.

HAPPY SINGH
  • 536
  • 4
  • 13
2

The best way to do this is:

input.heighttext{
  padding: 20px 10px;
  line-height: 28px;
}
Ravi Kumar Yadav
  • 193
  • 2
  • 15
-1

You use this style code

.heighttext{
 float:right;
 height:30px;
 width:70px;
 }
Saeed
  • 3,415
  • 3
  • 24
  • 41