web-dev-qa-db-ja.com

Androidバージョン4.0に背景色を設定した場合、HTML選択ボックスにドロップダウン矢印が表示されない

選択ボックスの背景色を黄色に設定する必要があります。テストすると、Android 2.3およびAndroid 3.0。

しかし、Android 4.0では、ドロップダウン矢印のない完全な黄色として選択が表示されます。

問題を解決する方法はありますか？

私はこれを電話ギャップで設計しています。

これは、HTML選択の背景色を設定するコードです。

<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>
javascripthtmlcsscordovawebkit
22
Mayukh Raaj

Android <select>sのブラウザによるレンダリングはバグがあり、背景または境界線が適用されている場合、通常のスタイルが削除されます。

<select>sが<select>sのように見えないのは使いやすさの問題がかなり大きいため、このブラウザでのみスタイルを設定しないことをお勧めします。

残念ながら、Androidブラウザを選択/除外する純粋なCSSの方法はないので、レイアウトエンジン（ を使用することをお勧めします）https://github.com/stowball/Layout-Engine ）、.browser-Androidのクラスを<html>タグに追加します。

次に、Androidブラウザ以外のすべての<select>sを次のようにスタイルします。

html:not(.browser-Android) select {
    background: #0f0;
    border: 1px solid #ff0;
}
18
Matt Stow

私はこれと同じ問題を抱えていましたが、他のいくつかのプロジェクトでは起こらないので、なぜこれが起こっているのか今まで疑問に思いました。

Bootstrap＆Foundation Frameworkの詳細を学習しようとしているときに、bootstrapで解決策を見つけましたドロップダウン用。

私は誰からも信用していませんが、それが言及され、解決策も与えられているページのリンクを共有したいと思います

ブートストラップ： https://getbootstrap.com/docs/4.0/getting-started/browsers-devices/#select-men

JS Bin： http://jsbin.com/OyaqoDO/2

これは、この問題がブートストラップに関連しているこの問題に直面する可能性のある他のユーザーに役立つことを願っています。 ＆あなたのプロジェクトのニーズに合わせて変更できますか？.

<script>
var nua = navigator.userAgent;
var is_Android = ((nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1) && !(nua.indexOf('Chrome') > -1));
if(is_Android) {
        $('select.form-control').removeClass('form-control').css('width', '100%');

}
</script>
4
Learning

（前述のように）Android）の時点で子のouterHeightが間違っていたため、このようなものはすぐに再計算できます。

window.setTimeout（function（）{$（window）.trigger（ 'resize'）;}、1500）;

...うまくいくかも？はい、それは助けになりそうです。

明らかに、最初の読み込みフェーズが経過した後に一度だけトリガーする必要があります（仕様の明らかなエラーで、他のすべてが現在準拠しています）。

0
MistereeDevlord

Mattが示したように、メニューに何らかの種類の境界線または背景を適用すると、ドロップダウン矢印が蒸発します。

最も簡単な解決策は、境界線またはカスタム背景色を削除することです。これにより、Android=デバイスの白いモダンな外観のドロップダウン矢印が表示されます。うまく収まらないサイトはないと思います。

0
Compworth

そのためにJavaScriptを使用したくない場合、および/またはUAスニッフィングに不満を感じている場合（必要な場合）が、ターゲットとするブラウザーの数を減らしても問題ない場合：

select
{
    /* common, “safe” styles */
}
@supports (appearance: none)
{
    select
    {
        /* borders and backgrounds */
    }
}

注目すべき不在者はすべてのIEです（Edgeはフルスタイルを取得します）： http://caniuse.com/#feat=css-featurequeries

0
saji