javascript - HTML select box not showing drop-down arrow on android version 4.0 when set with background color

Question

Welcome To Ask or Share your Answers For Others

javascript - HTML select box not showing drop-down arrow on android version 4.0 when set with background color

posted Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

javascript - HTML select box not showing drop-down arrow on android version 4.0 when set with background color

I need to set the background color for select box as yellow. When i tested,it does show box with yellow color and arrow on android 2.3 and android 3.0.

But on android 4.0 it shows the select as complete yellow without the drop-down arrow.

Any idea how to resolve the issue?

I am designing this with phone-gap.

This is my code where i am setting background-color for 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>

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-23T17:58:51+0000

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

Categories

javascript - HTML select box not showing drop-down arrow on android version 4.0 when set with background color

javascript - HTML select box not showing drop-down arrow on android version 4.0 when set with background color

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags