i have following markup + css works fine on desktop browsers, , sort of okay in firefox on android, ::after content doesn't render in chrome (or "default" browser) on android.
any ideas why might be?
chrome 42.0.2311 android 4.4.3 (htc 1 m7)
here's codepen if helps: http://codepen.io/sbeliv01/full/lveqkz/
html/css
.contactform { width: 100%; margin: 0 auto; } .contactform-wrapper { padding: 4em; background: #efeeee; } .contactform select { appearance: none; -moz-appearance: none; -webkit-appearance: none; border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; width: 100%; color: #002d57; font-size: 1.5em; font-weight: 100; line-height: 1.5em; background: #fff; padding: .5em 2em .5em .5em; border: none; } .contactform select::-ms-expand { display: none; } .contactform .select { position: relative; } .contactform .select::after { content: "\25be"; display: block; color: #0084ff; font-size: 16px; position: absolute; top: 50%; right: 1.5em; transform: translatey(-50%); -webkit-transform: translatey(-50%); -moz-transform: translatey(-50%); } .contactform .column { width: 100%; }<div class="contactform-wrapper"> <form class="contactform"> <div class="row"> <div class="column select"> <select name="co" id="co"> <option value="">select country...</option> <option value="">country 1</option> <option value="">country 2</option> <option value="">country 3</option> </select> </div> </div> </form> </div>
it seems older versions of android having trouble display \25be on chrome, sounds bug. workaround change \25bc (similar shape) shows correctly. alternatively, use font icons.
.u25be::after { content: "\25be"; } .u25bc::after { content: "\25bc"; }<div class="u25be">25be</div> <div class="u25bc">25bc</div>jsfiddle: http://jsfiddle.net/fbsrmgru/
