The alignment of my input placeholder text varies across different browsers and devices. While it appears correctly in Firefox and Chrome desktop, Safari desktop and mobile, as well as Firefox Mobile and Chrome Mobile display the text too high.
I've attempted to adjust padding and line-height settings without success in resolving the issue.
For reference, here is the code snippet exhibiting the problem on mobile devices:
https://codepen.io/paulspelman/pen/XGvVrE
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
padding: 0;
margin: 0;
color: #00bb80;
background: #101010;
}
.wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 100vw;
height: 100vh;
margin: 0 auto;
max-width: 900px;
font-family: sans-serif;
text-align: center;
width: 70%;
}
.input-holder {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: 4rem;
margin: 0 auto 2rem auto;
}
<input {
height: 4rem;
width: 12rem;
font-size: 2rem;
font-weight: 300;
text-align: left;
padding: 0 0 0.2rem 1rem;
margin-left: 0.5rem;
color: #9b9b9b;
background: #101010;
border: 1px solid #434343;
border-right: 0;
border-radius: 0;
}
input::-webkit-input-placeholder {
font-size: 1.1rem;
font-weight: 400;
position: relative;
top: -0.3rem;
color: #9b9b9b;
}
... (remaining CSS code) ...
</div></pre>
<pre><code><div class="wrapper">
<div class="input-holder">
<p class="dollar-sign">$</p>
<input type="text" class="user-input" placeholder=" Placeholder text" maxlength="4" value="" autocomplete="off">
<button class="calculate-button">→</button>
</div>
</div>