I have a simple site with forms utilizing placeholder text. The problem is that the size of the font is radically different across browsers on mobile phones. Cbtemail.com is the site if you want to check out the css.
input {
margin-bottom: 20px;
background-color: #CCC;
color: #000;
height: 60px;
font-size:28px
}
textarea {
background-color: #ccc;
width:100%;
margin-bottom: 20px;
height: 90px;
font-size:12px
}
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: #555;
opacity: 1; /* Firefox */
font-size: 2em;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #555;
}
::-ms-input-placeholder { /* Microsoft Edge */
color: #555;
}
Changing the font size using ::placeholder helps except chrome still has different sizes between devices (iphone vs android)