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的活动

  • 如何在android webview中优化renderspeed
  • 让Facebook登录使用Android Webview
  • Android的webview SKIPS JavaScript甚至与setJavascriptEnabled(true)和WebChromeClient
  • Make Espresso等待WebView完成加载
  • Webview到PDF忽略作业名称
  • 在React Native中从应用程序本身的webviewredirect到移动应用程序
  • 如何通过React Native在Android WebView中隐藏滚动条
  • Android WebView不从caching加载第二页
  • 通过@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; }