[FIXED] How can I fix inconsistent placeholder text vertical alignment across desktop and mobile?

Issue

My input placeholder text is correctly vertically aligned in Firefox and Chrome desktop. But on Safari desktop plus Firefox Mobile, Chrome Mobile and Safari Mobile the text is way too high.

I've tried playing around with padding and line-height but haven't been able to solve it.

Here is the code - view it on mobile to see the problem:

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;
}

input:-ms-input-placeholder {
  font-size: 1.1rem;
  font-weight: 400;
  position: relative;
  top: -0.3rem;
  color: #9b9b9b;
}

input::-ms-input-placeholder {
  font-size: 1.1rem;
  font-weight: 400;
  position: relative;
  top: -0.3rem;
  color: #9b9b9b;
}

input::placeholder {
  font-size: 1.1rem;
  font-weight: 400;
  position: relative;
  top: -0.3rem;
  color: #9b9b9b;
}

.dollar-sign {
  color: #9b9b9b;
  font-size: 2rem;
  font-weight: 300;
  margin: 0;
  padding-bottom: 0.4rem;
}

button {
  height: 4rem;
  font-size: 1.5rem;
  width: 4rem;
  font-weight: 400;
  text-align: center;
  background-color: #797979;
  color: #101010;
  border: 0;
  padding: 0;
}

<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">&rarr;</button>
    </div>

</div>

Solution

There is a small hack that can fix it. You need to specify :

@supports(font-synthesis: inherit) { // not supported by Chrome but supported by Safari
   input::placeholder {
     line-height:3em
  }
}

Demo

Answered By - Vega

Answer Checked By - David Marino (PHPFixing Volunteer)