The Browser useragent version:
"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"
The basic HTML Code
<!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>
This seems to be working on UIWebView(iPhone) and the native browsers. Only android webView is having the issue.Any help will be appreciated.The webview is a cordova activity
1 Answer
Answer by @mattstow from here
The Android Browser's rendering of <select>s is buggy and will remove the normal styling if a background or border is applied.
Since <select>s not looking like <select>s is a pretty big usability issue, your best bet is to not style them for this browser only.
Unfortunately, there's no pure CSS way of selecting/excluding the Android Browser, so I recommend you use Layout Engine (), which will add a class of .browser-android to the <html> tag.
You could then style all <select>s except on Android Browser, like so:
html:not(.browser-android) select {
background: #0f0;
border: 1px solid #ff0;
}
