I have the following markup + CSS which works fine on all desktop browsers, and even sort of okay in Firefox on Android, but the ::after content doesn't render in Chrome (or the "default" browser) on Android.
Any ideas why this might be?
Chrome 42.0.2311 Android 4.4.3 (HTC One M7)
Here's a codepen if it 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 a country...</option>
<option value="">Country 1</option>
<option value="">Country 2</option>
<option value="">Country 3</option>
</select>
</div>
</div>
</form>
</div>
It seems like older versions of Android are having trouble to display \25BE on Chrome, it sounds like a bug. As a workaround you could change it to \25BC (similar shape) it then shows up correctly. Alternatively, you could also 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/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With