Currently, I am encountering an issue with the styling of a standard input element in React. Specifically, the placeholder text moves up and down by about 2px when viewed on Chrome, while there are no problems on Safari. How can I go about resolving this inconsistency?
I attempted to add 1px of padding-bottom to the password type, which seemed to correct the problem in Chrome but ended up causing issues in Safari. I'm puzzled as to what might be causing this shifting effect on my placeholder text. Any suggestions or insights?
.input {
width: 100%;
height: 40px;
font-family: Tahoma, sans-serif, -apple-system, system-ui;
font-weight: 400;
font-size: 14px;
line-height: 20px;
background-color: inherit;
border: none;
text-align: left;
letter-spacing: 0.5px;
&::placeholder,
&[type='password']::placeholder {
font-family: Tahoma, sans-serif, -apple-system, system-ui;
font-size: 14px;
letter-spacing: 0.5px;
line-height: 20px;
}
&[type='password'] {
font-family: Tahoma, sans-serif;
letter-spacing: 2.5px;
line-height: 20px;
padding-bottom: 1px;
}
&:focus {
outline: none;
}
}