Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
669 views
in Technique[技术] by (71.8m points)

cordova - PhoneGap build webkit-appearance no drop down arrow for select tag

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?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...