HTML选择下拉列表在android webview中不起作用

Bij*_*009 11 html android html-select webview

浏览器使用者版本:

"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"
Run Code Online (Sandbox Code Playgroud)

基本的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>
Run Code Online (Sandbox Code Playgroud)

这似乎适用于UIWebView(iPhone)和本机浏览器.只有android webView才有问题.任何帮助都将受到赞赏.webview是一项cordova活动

Akr*_*nee 0

@mattstow 从这里回答

Android 浏览器对<select>s 的渲染存在缺陷,如果应用背景或边框,则会删除正常样式。

由于<select>s 看起来不像<select>s 是一个相当大的可用性问题,因此最好的选择是不要仅针对此浏览器设置它们的样式。

不幸的是,没有纯 CSS 方法来选择/排除 Android 浏览器,因此我建议您使用布局引擎(https://github.com/stowball/Layout-Engine),它将向浏览器添加一个 .browser-android 类。<html>标签。

然后,您可以设置<select>除 Android 浏览器之外的所有样式,如下所示:

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