Firefox 30 ist nicht versteckt select-box, Pfeile mehr

Update

Ab Januar 2015, nun funktioniert das wieder mit der Veröffentlichung von Firefox 35. Siehe die Antwort weiter unten für historische Referenz.

Hintergrund

Den hack verwendet wurde, ist dies:

select {
    -moz-appearance: none;
    text-indent: 0.01px;
    text-overflow: '';
}

In meinen Tests, FF-29, -moz-appearance:none; hatte keine Auswirkungen. Was verursacht die Pfeil-Feld nicht angezeigt wurde, die zweiten zwei Zeilen. Er sagte, dass jeder überlauf wird durch einen leeren string ersetzt, und dann wird es verwendet, text-indent, um die Ursache zu select zum überlaufen. Da die Pfeil-box gerendert wird als ein einzelnes element, ähnlich einem einzelnen Buchstaben, dies verursacht, dass es ersetzt werden durch eine leere Zeichenkette.

Was Passiert Ist

Jemand bei Mozilla aufgefallen, dass, wenn Sie haben Polsterung auf den dropdown -selectder Pfeil ändert sich nicht groß. Laut bug-reportdieses Problem wurde nun behoben:

Das problem ist, dass dieser sich hat scheiden lassen den Pfeil von der normalen CSS-Regeln. Ich habe versucht,paddingtext-indentmarginwhite-spacetext-wrapund ein paar mehr, und ich kann nicht finden, alles, was, die Sie betreffen wird. an anderer Stelle um internetdie Leute sagen, die gleiche Sache, leider.

Was Jetzt

1. Wir haben ein paar Optionen. Sie können ein overlay, kombiniert mit pointer-events:none Stil der dropdown-aber Sie wollen: Tutorial

2. Können Sie erstellen ein komplett separates dropdown zu ersetzen select mit Javascript: Tutorial

Wir können auch beobachten Sie die Antrag auf Firefox-Bugzillaund hoffe, dass eines Tages Sie erstellen einen nicht-hacky Weg, dies zu tun. BITTE BEACHTEN Sie: gehen Sie nicht dort und starten Sie kommentieren zu wollen. Teil der Grund, warum es so verzögert ist, dass die Menschen warf einen Anfall. Es kann helfen,Stimme für die Ausgabe.

Update Sept. 2014

Dies ist nun aktiv gearbeitet für Firefox. 2 patches eingereicht worden und wurden noch nicht überprüft für eine Woche. Wahrscheinlich Szenario ist, dass dies macht es in FF35 Aurora, und wir haben ein paar Wochen für Sie zu erhalten, überprüft und genehmigt, bevor der cutoff-Datum (Firefox arbeitet auf eine 6-wöchige release-Zeitplan). Es könnte auch verzögert werden, und es könnte sogar theoretisch sein, "heben", was bedeutet gepatcht in der aktuellen Aurora-und Beta-Versionen, erschien früher.

Update Okt. 2014

Dieser, wie jetzt schon offiziell aufgelöst! Art. Ein patch, um Benutzern zu erlauben ausblenden der dropdown-arrow-element begangen worden ist, und wird geliefert mit Firefox 35 im Januar 2015.

Dies erlaubt nur Benutzern das ausblenden des Pfeils. Es Stil, ist eine andere Frage, die wurde ausgegliedert in ein bug-ticketdie zukünftig in Betracht gezogen werden.

Update Jan. 2015

Dies wurde nun behoben! Firefox 35 kam am 13. Januar, und Sie können nun -moz-appearance:none zu entfernen den Pfeil.

InformationsquelleAutor der Antwort Andy Mercer

.SelectBox select {
   background: transparent;
   width: 182px;
   padding-right: 29px;
   font-size: 100%;
   text-indent: 0.01px;
   text-overflow: "";
   border: none;
   height: 17.5px;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.SelectBox {
   width: 154px;
   height: 15.8px;
   overflow: hidden;
   background: url("Images/Arrow.png") no-repeat 141px center #ffffff;
   border-radius:2px;
   border: 1px solid #B90F22;
}

<div class="SelectBox">
   <select>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
   </select>
</div>

Dieser scheint gut zu funktionieren in jeder größeren browser, sondern der IE. IE fällt wieder auf das Standard-dropdown-so, dass sollte nicht zu viel von einem problem.

InformationsquelleAutor der Antwort Tim Jongerius

Können Sie über diese Lösung für firefox, mit Lieferanten pseudo-Klasse: - moz-any() und pointer-Ereignisse, die nur für mozilla und wirken sich nicht auf andere Browser, denn beides ist gültig ab version 3.6.

hier ist ein jsbin-Beispiel
http://jsbin.com/pozomu/4/edit

InformationsquelleAutor der Antwort

Ich meine Feste dieses Problem, indem Sie einige Stil zu div und wählen Sie individuell.

Jeder kann ändern Sie seine Breite, und anderen style-Eigenschaften, die a/c benötigt. 🙂

Hier ist die js-fiddle. JSFIDDLE
getestet auf allen Browsern.

wählen Sie::-ms-Erweiterung für den IE und -webkit-user-select: none für chrome.

 <div  class="common-dropdown-small-div" style="width: 220px">
    <select id="select" class="common-dropdown-project-select">
        <option>
            apple
        </option>
        <option>
            blackberry
        </option>
        <option>
           pumpkin
        </option>
    </select>
</div>
.common-dropdown-small-div{
  border: 1px solid rgb(208, 208, 208);
  border-radius: 5px !important;
  overflow: hidden; 
}

.common-dropdown-project-select{
  width: 100% !important;
  background-image: url("http://upload.wikimedia.org/wikipedia/en/f/f1/Down_Arrow_Icon.png");
  background-position: 97% 60%, 0 0 ! important;
  background-repeat: no-repeat;
  background-size: 25px 16px;
  border: none  ! important;    
  outline : medium none !important;
  display: inline-flex !important;
  height: 33px !important;
  vertical-align: top;
  -webkit-appearance: none;
}

select::-ms-expand {
  display: none;
}

InformationsquelleAutor der Antwort Rajdeep