Größe <option> unabhängig von

Wir haben eine Website mit einem großen numerischen Auswahlelement, das derzeit als ein "Spinner" -Rad der Art eingerichtet ist, aber wir müssen es stattdessen auf einen Standard <select><option> Eingang ändern. Das Problem ist, dass es so aussieht, als ob Chrome und neue Versionen von Safari nun die Drop-Down-Optionen als dieselbe Schriftgröße wie das select-Element anzeigen, wobei Firefox das Dropdown-Fenster in der browsereigenen Schriftgröße anzeigt, die wir bevorzugen.Größe <option> unabhängig von

Dies scheint ein seltsames Verhalten im Namen von Chrome/Safari zu sein, da andere Stile nicht übernommen werden können (Schriftart, Farbe usw.).

Hier ist eine jsfiddle zu demonstrieren, können Sie es in verschiedenen Browsern versuchen, um die verschiedenen Ausgänge zu sehen.

Wir wollen wirklich mit nativem bleiben, anstatt etwas individuelle Gestaltung der native mobile Auswahlschnittstellen von iOS Safari, Android Chrome etc.

Jede Hilfe wird sehr geschätzt, Dank zu erhalten!

.select-wrapper { 
 
    position: relative; 
 
    display: block; 
 
    font-size: 16px; 
 
} 
 

 
.selectClass { 
 
    position: relative; 
 
    display: block; 
 
    font-size: 96px; 
 
    text-transform: uppercase; 
 
} 
 

 
.selectClass option { 
 
    font-size: 16px !important; 
 
} 
 

 
.selectClass .option-5 { 
 
    font-size: 16px !important; 
 
}

<div class='select-wrapper'> 
 
<select class="selectClass"> 
 
    <option value="">Option 1</option> 
 
    <option value="">Option 2</option> 
 
    <option value="">Option 3</option> 
 
    <option value="">Option 4</option> 
 
    <option class='option-5' value="">Option 5</option> 
 
    <option value="">Option 6</option> 
 
    <option value="">Option 7</option> 
 
</select> 
 
</div>

Quelle

2017-07-12 rbross3030

FYI: Wenn Sie 'font-family: serif' zu' selectClass' hinzufügen, sehen Sie sogar _more_ Inkonsistenzen. Auf MacOS Chrome überträgt sich die Schriftgröße auf die Optionen, die Schriftfamilie jedoch nicht! – duskwuff

Native Select-Box haben unterschiedliche Anzeige von verschiedenen Browsern, aber wenn Sie möchten, dass es in allen Browsern gleich aussehen, https://silviomoreto.github.io/bootstrap-select/ – PenAndPapers

Sie können nur sehr begrenzte Menge von CSS anwenden die Option auswählen. Wenn Sie also eine wirklich anpassbare Lösung wünschen, sollten Sie besser 1) Ihren eigenen Block mit 'position: absolute' schreiben oder 2) einige JavaScript-Komponenten verwenden, um die Dropdown-Funktionalität zu erreichen. –

Dies ist ein interessantes Problem und eine, die ich auf mich gekommen sind, aber soweit ich weiß, gibt es jetzt Weg, dies zu erreichen. Lesen Sie diesen Artikel CSS Tricks Artikel für eine vollständigere Behandlung.

Mehrere Browser sperren bestimmte Komponenten und stellen keine Optionen zur Verfügung, um ihr Styling ohne ernsthafte Zauberei zu modifizieren. Ein anderes ähnliches, aber anderes Beispiel ist ein checkbox, während Sie Checkboxen anpassen können und dabei nicht trivial sind.

Ich würde vorschlagen, entweder Ihr Design erneut zu besuchen, wie der Autor von CSS Tricks vorschlägt, oder Sie könnten mit einer bereits erstellten Lösung wie Select2 Plugin oder Selectize gehen, oder Sie könnten eine von Grund auf neu erstellen, indem Sie diese als Referenz verwenden.

Quelle

2017-07-13 23:11:01

Dank jeanpier_re, sieht aus wie benutzerdefinierte es ist. Ich schaue mir diese an, könnte mir etwas Zeit auf dem Handy sparen. – rbross3030

Größe <option> unabhängig von

Antwort

Verwandte Themen