Remove top and bottom padding in text input in Chrome/Firefox

6
votes

I'm trying to make a input look like plain text. The aim is to draw a span, when user clicks the span it hides and displays an input that looks like plain text, but editable by the user.

In Chrome and Firefox I cannot get rid of top and bottom paddings, even if I set padding and margin CSS properties to 0.

My CSS looks like this:

input.myInput {
    font-family: "segoe ui";
    font-size: 20px;
    padding: 0px;
    margin: 0px;
    outline: none;
    border: 0px;
    vertical-align: baseline;
}

See that font size is set to 20px. Chrome and Firefox add 4px padding-top and padding-bottom, so that input is 28px tall, not 20px as expected.

3
htmlcssformsfirefoxgoogle-chrome
Can you provide a fiddle or live demo? – Jrod
Thanks Jrod, it actually helped me to see the problem. Creating the jsfiddle demo I notice that there was no such a problem when creting style from scratch. My <span> had line-height modified in CSS, and that's why it didn't match the <input> height. Thanks! – German Latorre
it might be your placeholder. Select it with ::placeholder and use relative positioning to bring it "a bit"(e.g., top: 0.1em;) down. – aderchox

3 Answers

6
votes

You need to reset the line-height of the input element to be 20px as well. By default, some browser add 4px (2 top + 2 bottom) to input element's line-height.

2
votes

It could be your font. Try setting the CSS height of the input directly or try adjusting line-height.

2
votes

As Diodeus suggested, just add height to your input.

input.myInput {
    font-family: "segoe ui";
    font-size: 20px;
    height: 20px;
    padding: 0px;
    margin: 0px;
    outline: none;
    border: 0px;
    vertical-align: baseline;
}

line-height will not work