选择标记未在库存Android浏览器上正确设置样式

Question

我试图在Android（4.2.1）的WebView中显示两个选择框，但它们的高度并不正确。在较高的Android版本（4.4.2）中，使用相同的CSS结果是正确的。我正在使用Bootstrap。

HTML code：

    <div class="row col-xs-12 texto-cent barrasearch2 separacion-filas visible-xs" id="barraInbox">
       <div class="col-xs-12 col-sm-6 col-md-5 ident-der">
           <select size="1" name="cmd2" class="select-mod">
               <option value="mg_move">Move messages to</option>
               <option value="mg_copy">Copy messages to</option>
               <option selected="" value="mb_change">Open mailbox</option>
           </select>
           ...
      </div>
    </div>

CSS代码：

.select-mod{
    height: 30px !important;
    font-size: 14px !important;
    -webkit-appearance: menulist !important;
    background-color: #fff;
    line-height: 1.42857143;
}

Android 4.2.1中的结果：

正确的结果:(使用Bootstrap CSS类）

感谢您提前！

Answer 1

它可能是由重要标记引起的，因为它们通常会使我的CSS乱七八糟。尝试更具体的CSS样式路径：

   #barraInbox div select.select-mod {
       height: 30px;
       font-size: 14px;
       -webkit-appearance: menulist;
       background-color: #fff;
       line-height: 1.42857143;
   }

如果不知道它们应该是什么样子，很难分辨。可能有更好的方法来做到这一点。你可以链接一个它应该看起来的图像吗？

Answer 2

select {
  height:25px;
  width:100%;
  border: 1px solid grey;
  -webkit-appearance: listbox;
  background-image: url(data:image/png;base64,R0lGODlhDQAEAIAAAAAAAP8A/yH5BAEHAAEALAAAAAANAAQAAAILhA+hG5jMDpxvhgIAOw==); /* a simple arrow img */
  background-repeat: no-repeat;
  background-position: right center;
  padding-right: 20px;
  padding-left: 5px;
}

请尝试这个，这对你有用。