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">→</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
}
}
Answered By - Vega Answer Checked By - David Marino (PHPFixing Volunteer)
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.