Warum macht Firefox definieren Sie eine Hintergrundfarbe, wählen Sie Pfeil-Taste, wenn ich einen benutzerdefinierten Rahmen oder Hintergrundfarbe?

Eine Standard-select-Eingang sieht so aus in FF 37:

Wenn ich versuche zu geben, es eine andere Rahmenfarbe wie diese:

select { border: 1px solid silver; }

Es Ergebnisse in dieser:

Warum macht Firefox definieren Sie eine Hintergrundfarbe, wählen Sie Pfeil-Taste, wenn ich einen benutzerdefinierten Rahmen oder Hintergrundfarbe?

Aus irgendeinem Grund, wenn Sie geben eine select-Eingang einen anderen Rahmen, es fügt auch einen hintergrund und Rahmen auf die Schaltfläche mit dem Pfeil.

Eine ähnliche Sache passiert, wenn ich den folgenden Code:

select { background: transparent; }

Es endet so:

Warum macht Firefox definieren Sie eine Hintergrundfarbe, wählen Sie Pfeil-Taste, wenn ich einen benutzerdefinierten Rahmen oder Hintergrundfarbe?

Warum ist das passiert und wie kann ich nur ändern Sie die Grenze oder den hintergrund für eine select-Eingabe ohne die änderung der Pfeil nach unten Taste?

jsfiddle mit Beispiel

Dies ist vermutlich darauf zurückzuführen, wie Windows Vista/7/8/10 Griffe rendering von select-Boxen.
Es gerade getestet auf Ubuntu und während der Standard-Stil in Ubuntu ist anders, das Ergebnis ist das gleiche.
Ich denke, andere Systeme haben zwei verschiedene visuelle Zustände für die Felder auswählen, die (in der Regel ist dies zu unterscheiden, eine Auswahl aus einer combo-box). Ich sehe ein ähnliches Ergebnis in Safari auf OS X als auch jetzt, dass ich getestet habe. Ich weiß, dass Windows XP rendert die Pfeil-Taste in der select-Boxen und combo-Boxen auf die gleiche Weise.
finde es ein bisschen komisch, dass, wenn Sie nur wollen, um die änderung einer Eigenschaft, wie eine Rahmenfarbe für die ganze select-box Standard ist " some basic-version von sich selbst. Ich habe einige der Forschung, bevor Sie Fragen, aber die meisten Ergebnisse, die ich gefunden habe, war, wie Sie vollständig loszuwerden, der Pfeil-Taste mit -moz-appearance: none. Das macht mich denken, dass die Menschen dieses Problem lösen, indem Sie Ihre eigenen benutzerdefinierten Pfeil nach unten-Symbol.

InformationsquelleAutor Pickels | 2015-04-08

css firefox

6

Mit zu beginnen, styling form-Elemente ist äußerst kompliziert und lästig. Einige Fortschritte wurden in letzter Zeit, aber das Verhalten ist inkonsistent von browser zu browser. Das problem kommt von der Weise, die browser haben in der Vergangenheit behandelt Formular-Elemente (lassen das Betriebssystem entscheiden, das element Aussehen).

Nun zu deiner Frage: aus irgendeinem Grund, Wann immer Sie Sie ändern, FF default-stylesheet, browser gilt eine andere Art der Auswahl-Box (dies kann ein Fehler, eine schlechte Umsetzung oder geplant Verhalten, aber es ist eindeutig nervig).

Eine Lösung wäre, um loszuwerden, alle die "chrome" - ganz, mit einer Verkäufer-Eigenschaft -x-appearance: none wie diese:
```
select {
  border: 1px solid silver;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 25px;
  background: url(data:image/gif;base64,R0lGODlhCwALAJEAAAAAAP///xUVFf///yH5BAEAAAMALAAAAAALAAsAAAIPnI+py+0/hJzz0IruwjsVADs=);
  background-repeat: no-repeat;
  background-position: 95% 42%;
}
```
Beachten Sie, dass der re-gelten die nach-unten-Pfeil (ich habe dies durch das einfügen eines Bildes als hintergrund, in base64 codiert.) Sie können jedes Bild, das Ihren wünschen entspricht.

Das problem bei diesem Ansatz ist, dass es nicht im IE funktioniert: http://caniuse.com/#search=appearance

Hier haben Sie eine Geige, um es zu testen: https://jsfiddle.net/81L844p4/4/

Hoffe, es hilft.

InformationsquelleAutor Damian Vila

Antwort von Damian ist nicht schlecht, aber ich bevorzugte etwas, was ist einfacher zu pflegen. Im Grunde, ich muss auch die Möglichkeit haben, bereiten Sie einen Stil, die ich ändern könnte eine Farbe-je nach Thema, deshalb png-Bildes (base64) war nicht eine gute option.

Dies ist, wie dieses getan werden kann, mit SVG:

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    /* SVG background image */
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23FF0000'><polygon points='20,0 80,0 50,52'/></svg>");
    background-size: 12px;
    background-position-x: right;
    background-position-y: calc(100% - 10px);
    background-repeat: no-repeat;
}

Ich benutze scss zu generieren Stile basieren auf Variablen, also ich wollte $base-font-color als Farbe des Dreiecks. Das problem war die Codierung.

Chrome kann einfach verarbeiten .. fill='"+ $base-font-color +"' .. in:

background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='"+ $base-font-color +"'><polygon points='20,0 80,0 50,52'/></svg>");

aber firefox benötigt %23. Das war ein problem, bacause ich Speichere Farben in Variablen wie: $base-font-color: #3e4f5e; und nicht als $base-font-color: '3e4f5e'. Lösung war konvertieren von Farbe zu string und verwenden string Ersatz zu ersetzen '#' bis '%23'

@function str-replace($string, $search, $replace: '') {
  $index: str-index($string, $search);

  @if $index {
    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
  }

  @return $string;
}

@function to-string($value) {
  @return inspect($value);
}

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    /* SVG background image */
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='"+ str-replace(to-string($base-font-color), '#', '%23')  +"'><polygon points='20,0 80,0 50,52'/></svg>");
    background-size: 12px;
    background-position-x: right;
    background-position-y: calc(100% - 10px);
    background-repeat: no-repeat;
}

InformationsquelleAutor noisy

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.