Reduce textbox height

Question

I have input type TEXT in my form, i want to reduce the HEIGHT, i have tried many things, but seems like whatever I do it does not work, I tried with line-height, margin etc. below is something i have.

  .txtboxItem{
    height: 1em;
    font-size:8px;
    }

and here is my markup

<input class="txtboxItem" type="text" id="txt_emailAddress" />

please note, width works fine, font looks small in my textbox, but why height of textbox is NOT reducing?

EDIT: I think my external file has input property with "!", anyway I can override it in my local html file?

I think `!important` could normally override another attribute, but you have to make sure when both of them have `!important`, you have to put your `.txtboxItem` declaration after the external one to be in effect. — d.yuk, Mar 25 '14 at 02:07

tintyethan · Accepted Answer · 2014-03-25T01:45:01.237

2

Its working for me using px...

input{height:5px;}

http://jsfiddle.net/mvNDh/

edit: I've used your code and its working in the same jsfiddle... http://jsfiddle.net/mvNDh/

edited Mar 25 '14 at 01:45

answered Mar 25 '14 at 01:34

tintyethan

1,772
3
20
44

its just not working, what could be the issue? where should I look in my HTML? – highwingers Mar 25 '14 at 01:38
try changing 1em to .5em – tintyethan Mar 25 '14 at 01:42
no effect, it works fine in fiddle, anyway to debug it? seems like my class is NOT overriding the code written by somebody else in a external css/bootstrap template. – highwingers Mar 25 '14 at 01:44
hmm...yes. Try putting it inline- – tintyethan Mar 25 '14 at 01:46
this is bothering me too much...even did not work. – highwingers Mar 25 '14 at 01:49
No, I guess too much OCD. lol. I think problem is some external css file has "!" with input type text, anyway to override the "!" stuff? – highwingers Mar 25 '14 at 01:53
right - I'm not sure. I think you should start a new thread with that question. But a quick search says you can't override it. – tintyethan Mar 25 '14 at 02:00
I did find this... http://stackoverflow.com/questions/11178673/how-to-override-important try useing ! in your css - sounds like this will override the previously loaded css important. – tintyethan Mar 25 '14 at 02:03

Aidan · Answer 2 · 2014-03-25T01:45:02.507

0

Use px instead of em, as em in most browsers is generally equal to about 16px unless the user has changed their default value.

height:8px;

Try remove any padding or margins

margin:0px;
padding:0px;

edited Mar 25 '14 at 01:45

answered Mar 25 '14 at 01:38

Aidan

757
3
13

it works just fine in fiddle, but in my web application textbox goes UP in height just fine, however it would not go down in height. – highwingers Mar 25 '14 at 01:41
You could try see if there is any padding and remove it. Note my updates – Aidan Mar 25 '14 at 01:44

Reduce textbox height

2 Answers2