javascript - HTML select box not showing drop-down arrow on android version 4.0 when set with background color -
i need set background color select box yellow. when tested,it show box yellowish color , arrow on android 2.3 , android 3.0.
but on android 4.0 shows select finish yellowish without drop-down arrow.
any thought how resolve issue?
i designing phone-gap.
this code setting background-color html select.
<select style="background-color:#ffff00;border:#ffff00;height:25px;font-family:arial, helvetica, sans-serif; color:#000000; font-size:14px; font-weight:bold; text-align:center;"> <option></option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select>
the android browser's rendering of <select>s buggy , remove normal styling if background or border applied.
since <select>s not looking <select>s pretty big usability issue, best bet not style them browser only.
unfortunately, there's no pure css way of selecting/excluding android browser, recommend utilize layout engine (https://github.com/stowball/layout-engine), add together class of .browser-android <html> tag.
you style <select>s except on android browser, so:
html:not(.browser-android) select { background: #0f0; border: 1px solid #ff0; } javascript html css cordova webkit
No comments:
Post a Comment