CODEWITHSUNDEEP
htmlcssinput
hnsnml
hnsnml

Reputation: 34

HTML input text cursor position issue

would just like to ask for your help. when the html page loads, the cursor on the input text is too high or in wrong position:

enter image description here

but when on focus, the input text cursor is correct:

enter image description here

found another same question here, but the line-height fix does not resolve my issue.

css:

input[type=text] {
    border-radius: 0 !important;
    height: 50px !important;
    font-size: 14px !important;
    box-shadow: none !important;
    line-height: 100% !important;
}

Upvotes: 0

Views: 13334

Answers (2)

Petr Lazarev
Petr Lazarev

Reputation: 3182

Try

line-height: normal;

Usually it helps with similar issues.

Upvotes: 0

Rifat
Rifat

Reputation: 11

This is padding issue. When you click on input fiend, it is focused and then it get a padding so the cursor is in right position. So set padding like the following - 

input[type=text] {
    border-radius: 0 !important;
    height: 50px !important;
    font-size: 14px !important;
    box-shadow: none !important;
    line-height: 100% !important;
    padding: adjust according to your choice;
}

Upvotes: 1

Related Questions