Geek asks and answers

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

I am trying to make the input look like plain text. The goal is to draw a gap when the user clicks on the area that he is hiding and displays an input that looks like plain text but editable by the user.

In Chrome and Firefox, I can’t get rid of the upper and lower paddings, even if I set the properties of add-ons and CSS fields 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 the font size is 20px. Chrome and Firefox add 4px padding-top and padding-bottom, so the input will be 28px high, not 20px as expected.

+5
source share
3 answers

reset line-height 20px. 4px (2 + 2 ) .

+6

. CSS .

+2

As suggested by Diodeus, just add height to your entry.

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

+1
source

More articles:


All Articles