Select box gives a grey background in Cordova on a HTC One

Question

We are building a Backbone Application with Cordova for Android and IOS and it works perfectly except for this specific issue. When using a HTC One (Android 4.3) the following grey bar shows up, which is not present on any of our test-devices.

The things i already tried and did not work:

• Setting the webview background to a different color
• Setting a background-color to the Select or Option elements
• Trying to add the -webkit-tap-highlight-color: rgba(0,0,0,0); to the select or option
• Trying the -webkit-appearance:none; on the select or option

I am hoping someone else also came across this specific issue and can help me out with this!

HTML:

<li class="icon select">
    <label data-model-attribute="type" onclick="" for="type">Type</label>

    <select class="index" id="type" name="type" tabindex="0">
        <option value="L">L</option>
        <option value="B">B</option>
        <option value="SLO>SLO</option>
        <option value="SLI">SLI</option>        
    </select>
    <b></b>
</li>

Computed layout Select (as far as i can tell)

-webkit-appearance: none;
-webkit-background-clip: border-box;
-webkit-background-origin: padding-box;
-webkit-background-size: auto;
-webkit-rtl-ordering: logical;
-webkit-writing-mode: horizontal-tb;
align-items: center;
background-attachment: scroll;
background-clip: border-box;
background-color: rgba(255, 0, 0, 0.4);
background-image: none;
background-origin: padding-box;
background-size: auto;
border-bottom-color: rgb(0, 0, 153);
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom-style: none;
border-bottom-width: 0px;
border-image-outset: 0px;
border-image-repeat: stretch;
border-image-slice: 100%;
border-image-source: none;
border-image-width: 1;
border-left-color: rgb(0, 0, 153);
border-left-style: none;
border-left-width: 0px;
border-right-color: rgb(0, 0, 153);
border-right-style: none;
border-right-width: 0px;
border-top-color: rgb(0, 0, 153);
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-top-style: none;
border-top-width: 0px;
box-sizing: border-box;
color: rgb(0, 0, 153);
cursor: default;
display: block;
font-family: 'Lucida Grande';
font-size: 13px;
height: 39px;
letter-spacing: normal;
line-height: normal;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
outline-color: rgb(0, 0, 153);
outline-style: none;
outline-width: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
position: absolute;
text-align: start;
text-indent: 0px;
text-shadow: none;
text-transform: none;
top: 0px;
white-space: pre;
width: 353px;
word-spacing: 0px;
writing-mode: lr-tb;
z-index: 1049;

Computed layout Option

color: rgb(0, 0, 153);
cursor: default;
display: inline;
font-family: 'Lucida Grande';
font-size: 13px;
font-weight: normal;
height: auto;
letter-spacing: normal;
line-height: normal;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
text-align: start;
text-indent: 0px;
text-shadow: none;
text-transform: none;
white-space: pre;
width: auto;
word-spacing: 0px;

Config.xml: (removed the namespace, name and description as they are not needed to know for this question)

<?xml version='1.0' encoding='utf-8'?>
<widget id="example" version="1.2.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>Example App</name>
    <description>
       Example Description
    </description>
    <author email="example@example.com" href="http://www.example.com">
    </author>
    <content src="index.html" />
    <access origin="*" />
    <preference name="fullscreen" value="false" />
    <preference name="webviewbounce" value="true" />
    <preference name="SplashScreen" value="splash" />
    <preference name="SplashScreenDelay" value="5000" />
    <preference name="backgroundColor" value="0xff000000" />
</widget>

Answer 1

I finally got Web Inspector Remote working and after systemically disabling all the styles, i found out that -webkit-appearance was the culprit. But only on this specific device... When setting

-webkit-appearance:menulist;

It started behaving again! It looks like setting it to none or button just doesn't work for this version of Android...

Answer 2

-webkit-appearance:none;

That worked for me but you can't add any padding or height to the select box.

-webkit-appearance:menulist;

Will work in HTC (it strips out any padding or height though) but if you are making custom styled select boxes, iPhones will make the select box appear in default styling. Not the effect you're after if you want custom select boxes.