Quantcast
Channel: Active questions tagged html - Stack Overflow
Viewing all articles
Browse latest Browse all 72443

Making form placeholder font same size across browsers

$
0
0

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)


Viewing all articles
Browse latest Browse all 72443

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>