Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

::after pseudo-element, a drop down arrow, not displaying on Android

Tags:

html

android

css

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>
like image 576
sbeliv01 Avatar asked Oct 20 '25 15:10

sbeliv01


1 Answers

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/

like image 96
Stickers Avatar answered Oct 23 '25 05:10

Stickers