HTMLselect下拉菜单在android webview中不起作用

浏览器useragent版本:

"Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_2_1 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8C148 Safari/6533.18.5" 

基本的HTML代码

 <!DOCTYPE html> <html> <head> <title>Test Pages</title> <meta name="format-detection" content="telephone=no"> <meta name="msapplication-tap-highlight" content="no"> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"> </head> <body> <div> <select> <option>One</option> <option>two</option> <option>three</option> <option>four</option> <option>five</option> </select> </div> </body> </html> 

这似乎是在UIWebView(iPhone)和本机浏览器上工作。 只有android的webView是有问题的。任何帮助将不胜感激。webview是一个cordova的活动

Solutions Collecting From Web of "HTMLselect下拉菜单在android webview中不起作用"

通过@mattstow从这里回答

Android Browser对<select>的渲染很麻烦,如果应用了背景或边框,将会删除正常的样式。

由于<select>不像<select>是一个相当大的可用性问题,所以最好的办法就是不要只为这个浏览器devise风格。

不幸的是,没有纯粹的CSSselect/排除Android浏览器的方式,所以我build议你使用布局引擎( https://github.com/stowball/Layout-Engine ),它将添加一个.browser-android类到<html>标签。

除了Android Browser之外,您可以对所有<select>进行样式设置,如下所示:

 html:not(.browser-android) select { background: #0f0; border: 1px solid #ff0; }