wake-up-neo.net

HTML-Auswahlfeld, das bei Android mit der Hintergrundfarbe keinen Dropdown-Pfeil anzeigt

Ich muss die Hintergrundfarbe für die Auswahlbox als gelb festlegen ... Wenn ich es getestet habe, wird die Box mit der gelben Farbe und dem Pfeil auf Android 2.3 und Android 3.0 angezeigt. 

Auf Android 4.0 wird jedoch die Auswahl als vollständig gelb ohne den Dropdownpfeil angezeigt.

Irgendeine Idee, wie man das Problem lösen kann?

Ich entwerfe das mit Telefonlücke.

Dies ist mein Code, bei dem ich die Hintergrundfarbe für HTML-Auswahl festlege.

<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>
21
Mayukh Raaj

Die Wiedergabe von <select>s im Android-Browser ist fehlerhaft und entfernt das normale Styling, wenn ein Hintergrund oder ein Rand angewendet wird.

Da <select>s nicht wie <select>s aussieht, ist dies ein ziemlich großes Problem mit der Benutzerfreundlichkeit. Daher ist es am besten, sie nicht nur für diesen Browser zu formatieren.

Leider gibt es keine reine CSS-Methode zum Auswählen/Ausschließen des Android-Browsers. Daher empfehle ich die Verwendung von Layout Engine ( https://github.com/stowball/Layout-Engine ), wodurch eine Klasse von .browser-Android hinzugefügt wird das <html>-Tag.

Sie können dann alle <select>s mit Ausnahme des Android-Browsers formatieren:

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

Ich hatte das gleiche Problem und ich wunderte mich bis jetzt, warum dies passiert, da es bei anderen Projekten nicht der Fall ist.

Beim Versuch, mehr über Bootstrap & Foundation Framework zu erfahren, habe ich die Lösung für Bootstrap gefunden, da dieses Problem auf einem mobilen Gerät aufgetreten ist, wenn wir Rand oder Hintergrund für die Dropdown-Menüs erwähnt haben.

Ich nehme kein Guthaben von irgendjemandem, möchte aber Links von der Seite, auf der es erwähnt wird, freigeben und die Lösung ist ebenfalls angegeben

Bootstrap: https://getbootstrap.com/docs/4.0/getting-started/browsers-devices/#select-menu

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

Ich hoffe, dass dies für andere nützlich sein wird, die möglicherweise mit diesem Problem konfrontiert sind, wenn diese Lösung mit Bootstrap zusammenhängt. & kann mich an Ihre Projektbedürfnisse anpassen.

<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

so etwas könnte funktionieren, um einen Moment danach neu zu berechnen, da die äußere Höhe der Kinder zu diesem Zeitpunkt auf Android falsch war (wie bereits erwähnt).

window.setTimeout (function () {$ (window) .trigger ('resize');}, 1500);

...könnte funktionieren? Ja das scheint zu helfen.

Offensichtlich möchten Sie, dass dies nur einmal ausgelöst wird, nachdem die anfängliche Ladephase Zeit hatte (in einem offensichtlichen Fehler der Spezifikation, den alle anderen derzeit erfüllen).

0
MistereeDevlord

Wie Matt angibt, wenn Sie eine Art Rahmen oder Hintergrund auf das Menü anwenden, wird der Dropdown-Pfeil verdampft. 

Einfachste Lösung: Entfernen Sie einfach einen Rand oder eine benutzerdefinierte Hintergrundfarbe. Auf Android-Geräten wird ein Drop-down-Pfeil mit einem schönen weißen und grauen "modernen" Hintergrund angezeigt. Ich glaube nicht, dass es Websites gibt, auf die es nicht passen würde. 

0
Compworth

Wenn Sie kein JavaScript dafür verwenden möchten und/oder sich schlecht über UA-Sniffing fühlen (wie Sie sollten), aber mit wenigen Browsern weniger Ziel haben:

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

Auffällige Abwesenheit sind alle von IEs (Edge erhält vollständige Stile): http://caniuse.com/#feat=css-featurequeries

0
saji