CODEWITHSUNDEEP
htmlcssformsfirefoxgoogle-chrome
German Latorre
German Latorre

Reputation: 11138

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

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.

Upvotes: 7

Views: 20382

Answers (3)

Nathan Stokes
Nathan Stokes

Reputation: 116

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

Upvotes: 3

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114377

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

Upvotes: 2

Paul
Paul

Reputation: 9022

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.

Upvotes: 7

Related Questions