title: Select box gives a grey background in Cordova on a HTC One
body: <p>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.</p>
  
  <p><img src="https://i.stack.imgur.com/S1mNP.jpg" alt="selectbox giving troubles."></p>
  
  <p>The things i already tried and did not work:</p>
  
  <ul>
  <li>Setting the webview background to a different color</li>
  <li>Setting a background-color to the Select or Option elements</li>
  <li>Trying to add the -webkit-tap-highlight-color: rgba(0,0,0,0); to the select or option</li>
  <li>Trying the -webkit-appearance:none; on the select or option</li>
  </ul>
  
  <p>I am hoping someone else also came across this specific issue and can help me out with this!</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;li class="icon select"&gt;
      &lt;label data-model-attribute="type" onclick="" for="type"&gt;Type&lt;/label&gt;
  
      &lt;select class="index" id="type" name="type" tabindex="0"&gt;
          &lt;option value="L"&gt;L&lt;/option&gt;
          &lt;option value="B"&gt;B&lt;/option&gt;
          &lt;option value="SLO&gt;SLO&lt;/option&gt;
          &lt;option value="SLI"&gt;SLI&lt;/option&gt;        
      &lt;/select&gt;
      &lt;b&gt;&lt;/b&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p><strong>Computed layout Select</strong> (as far as i can tell)</p>
  
  <pre><code>-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;
  </code></pre>
  
  <p><strong>Computed layout Option</strong></p>
  
  <pre><code>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;
  </code></pre>
  
  <p><strong>Config.xml:</strong> (removed the namespace, name and description as they are not needed to know for this question)</p>
  
  <pre><code>&lt;?xml version='1.0' encoding='utf-8'?&gt;
  &lt;widget id="example" version="1.2.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0"&gt;
      &lt;name&gt;Example App&lt;/name&gt;
      &lt;description&gt;
         Example Description
      &lt;/description&gt;
      &lt;author email="example@example.com" href="http://www.example.com"&gt;
      &lt;/author&gt;
      &lt;content src="index.html" /&gt;
      &lt;access origin="*" /&gt;
      &lt;preference name="fullscreen" value="false" /&gt;
      &lt;preference name="webviewbounce" value="true" /&gt;
      &lt;preference name="SplashScreen" value="splash" /&gt;
      &lt;preference name="SplashScreenDelay" value="5000" /&gt;
      &lt;preference name="backgroundColor" value="0xff000000" /&gt;
  &lt;/widget&gt;
  </code></pre>