PhoneGap build webkit-appearance no drop down arro

2019-01-20 04:29发布

站内文章 / 前端开发
48 0 0

问题:

I'm using PhoneGap build and my select tags have no dropdown arrow on the phone. I tried applying -webkit-appearance: menulist; but this doesn't help, I tried other choices but still just shows the option with no drop down arrow.

It an issue with PhoneGap because the same code shows a dropdown arrow on the native browser on my Android phone.

Only once I use PhoneGap build does the arrow disappear. Any solutions?

回答1:

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 (https://github.com/stowball/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;
}


标签： cordova select drop-down-menu phonegap
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~