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
51 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; } 
