So entfernen Sie den Pfeil aus einem ausgewählten Element in Firefox

172

Ich versuche, ein selectElement mit CSS3 zu formatieren. Ich erhalte die gewünschten Ergebnisse in WebKit (Chrome / Safari), aber Firefox spielt nicht gut (ich kümmere mich nicht einmal um den Internet Explorer). Ich verwende die CSS3- appearanceEigenschaft, kann aber aus irgendeinem Grund das Dropdown-Symbol in Firefox nicht ausschütteln.

Hier ist ein Beispiel für meine Arbeit: http://jsbin.com/aniyu4/2/edit

#dropdown {
 -moz-appearance: none;
 -webkit-appearance: none;
 appearance: none;
 background: transparent url('example.png') no-repeat right center;
 padding: 2px 30px 2px 2px;
 border: none;
}

Wie Sie sehen können, versuche ich nichts Besonderes. Ich möchte nur die Standardstile entfernen und meinen eigenen Dropdown-Pfeil hinzufügen. Wie gesagt, großartig in WebKit, nicht großartig in Firefox. Anscheinend wird das -moz-appearance: noneDropdown-Element nicht entfernt.

Irgendwelche Ideen? Nein, JavaScript ist keine Option

RussellUresti
quelle
3
Es gibt jetzt einen Fehlerbericht darüber: bugzilla.mozilla.org/show_bug.cgi?id=649849
sneilan
3
Ausgewählt ist eine JavaScript-Bibliothek, die Ihre Auswahl für Sie formatiert und sie wirklich schick aussehen lässt. Könnte einen Blick wert sein, obwohl es Ihr Problem wahrscheinlich nicht lösen wird.
Stephenmurdoch
Sie könnten diesen Blog-Beitrag nützlich finden: red-team-design.com/making-html-dropdowns-not-suck
Rui Marques
1
Sieht so aus, als hätten sie die -moz-appearanceCSS3-Eigenschaft hinzugefügt, die ich verwende, -moz-appearance: none;und sie scheint in Version 35.0.1 zu funktionieren.
Tony M
Eine einfache Lösung wäre, das Auswahlelement breiter als den Container zu machen. Und wickeln Sie ein Mozilla-URL-Präfix ein, damit die Optionen in Firefox nur breiter sind. @-moz-document url-prefix() { select { width: 105%; overflow: hidden; } }
Luke Femur

Antworten:

78

Okay, ich weiß, dass diese Frage alt ist, aber 2 Jahre später haben Mozilla nichts getan.

Ich habe mir eine einfache Problemumgehung ausgedacht.

Dadurch wird im Wesentlichen die gesamte Formatierung des Auswahlfelds in Firefox entfernt und ein Span-Element mit Ihrem benutzerdefinierten Stil um das Auswahlfeld gewickelt, sollte jedoch nur für Firefox gelten.

Angenommen, dies ist Ihr ausgewähltes Menü:

<select class='css-select'>
  <option value='1'> First option </option>
  <option value='2'> Second option </option>
</select>

Nehmen wir an, die CSS-Klasse 'css-select' lautet:

.css-select {
   background-image: url('images/select_arrow.gif');
   background-repeat: no-repeat;
   background-position: right center;
   padding-right: 20px;
}

In Firefox wird dies mit dem Auswahlmenü angezeigt, gefolgt vom hässlichen Firefox-Auswahlpfeil, gefolgt von Ihrem gut aussehenden. Nicht ideal.

Um dies in Firefox in Gang zu bringen, fügen Sie ein span-Element mit der Klasse 'css-select-moz' hinzu:

   <span class='css-select-moz'>
     <select class='css-select'>
       <option value='1'> First option </option>
       <option value='2'> Second option </option>
     </select>
   </span>

Korrigieren Sie dann das CSS, um den schmutzigen Pfeil von Mozilla mit dem Fenster -moz-Erscheinungsbild: auszublenden, und werfen Sie den benutzerdefinierten Pfeil in die Klasse 'css-select-moz' des Bereichs, aber lassen Sie ihn nur wie folgt auf Mozilla anzeigen:

.css-select {
   -moz-appearance:window;
   background-image: url('images/select_arrow.gif');
   background-repeat: no-repeat;
   background-position: right center;
   padding-right: 20px;
}

@-moz-document url-prefix() {
.css-select-moz{
     background-image: url('images/select_arrow.gif');
     background-repeat: no-repeat;
     background-position: right center;
     padding-right: 20px;
  }
} 

Ziemlich cool, weil ich erst vor 3 Stunden über diesen Fehler gestolpert bin (ich bin neu im Webdesign und völlig Autodidakt). Diese Community hat mir jedoch indirekt so viel Hilfe geleistet, dass ich dachte, es wäre an der Zeit, etwas zurückzugeben.

Ich habe es nur in Firefox (Mac) Version 18 und dann 22 (nachdem ich aktualisiert habe) getestet.

Alle Rückmeldungen sind willkommen.

Jordan Young
quelle
2
Und nach 2 Jahren ist dies die beste Antwort, die veröffentlicht wurde, um mein gewünschtes Ergebnis zu erzielen. Ich habe hier einen JSBin des Codes eingefügt : jsbin.com/aniyu4/2440/edit damit andere ihn anzeigen können, und nur ein kleines CSS-Update vorgenommen. Die Spanne war aufgrund der richtigen Polsterung breiter als die Auswahl in FF - dies bedeutete, dass durch Klicken auf den Pfeil kein Dropdown-Menü aktiviert wurde. Um dies anzupassen, habe ich einen negativen rechten Rand auf das Auswahlelement gesetzt, um die Breite der Spanne wieder hineinzuziehen und die Breite der Auswahl zu überlappen.
RussellUresti
Oh natürlich! Vielen Dank, Russell. Wirklich froh, dass das geholfen hat.
Jordan Young
5
Hat bei FF 23-24 in Windows nicht funktioniert (ich habe den jsbin im Kommentar ausprobiert). Endete mit dieser Problemumgehung stackoverflow.com/questions/6787667/…
Esteban
4
Bei FF 30 funktioniert es nicht mehr. Bitte senden Sie ein Ticket auf der Mozilla-Website: bugzilla.mozilla.org/show_bug.cgi?id=649849 . Je mehr Leute sich darüber beschweren, desto größer ist die Chance, dass sie es reparieren.
Stan
1
Funktioniert nur mit FF 31 auf Mac.
Erwin Wessels
165

Update: Dies wurde in Firefox v35 behoben. Einzelheiten finden Sie im vollständigen Inhalt .


Ich habe gerade herausgefunden, wie ich den Auswahlpfeil aus Firefox entfernen kann . Der Trick ist , eine Mischung aus zu verwenden -prefix-appearance, text-indentund text-overflow. Es ist reines CSS und erfordert kein zusätzliches Markup.

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

Getestet unter Windows 8, Ubuntu und Mac, den neuesten Versionen von Firefox.

Live-Beispiel: http://jsfiddle.net/joaocunha/RUEbp/1/

Mehr zum Thema: https://gist.github.com/joaocunha/6273016

João Cunha
quelle
1
Ich habe einen besonderen Platz in meinem normalerweise kalten Herzen für solche hackigen Korrekturen. Es ist ziemlich brillant. Der einzige Nachteil ist, dass FF am Ende des Dropdown-Textbereichs (zwischen dem tatsächlichen Text und dem Ende des Auswahlfelds) ein Leerzeichen lässt, wodurch ein inkonsistenter Abstand zwischen FF und den anderen Browsern entsteht. Dies ist jedoch nur ein kleiner Streitpunkt. Schöner Fund.
RussellUresti
Schöner Fang, @RussellUresti. Wenn man bedenkt, dass die ganze Idee darin bestehen könnte, einen modifizierten Pfeil bereitzustellen, erweist sich der Raum tatsächlich als nützlich. Ich habe ein bisschen damit gespielt und padding-right:10px;dem <select>Willen den jetzt unsichtbaren Pfeil nach links "gedrückt". Fazit: Firefox versteckt den Pfeil, Chrome ENTFERNT ihn. Ich werde meine Schriften entsprechend aktualisieren, danke dafür.
João Cunha
Ich habe ein bisschen einen Crossbrowser hinzugefügt (in alten Versionen von IE nicht getestet) als Antwort, damit Sie Ihren aktualisieren können
Daniël Tulp
2
Beste Lösung für mich, da -moz-appearence: windowes nicht mit transparenten Hintergründen funktioniert (zeichne ein hässliches BG an Ort und Stelle, zumindest unter Firefox Linux)
Kik
Da dadurch der Pfeil vollständig entfernt wird, sieht die resultierende <Auswahl> wie ein Textfeld aus und ist ziemlich hässlich. Sie können also wieder ein Hintergrundbild hinzufügen, damit es wie ein Dropdown aussieht: codepen.io/anon/pen/nvfCq
thom_nic
59

Der Trick, der für mich funktioniert, besteht darin, die Auswahlbreite auf mehr als 100% zu erhöhen und einen Überlauf anzuwenden: versteckt

select {
    overflow:hidden;
    width: 120%;
}

Dies ist derzeit die einzige Möglichkeit, den Dropdown-Pfeil in FF auszublenden.

Übrigens. Wenn Sie schöne Dropdowns wünschen, verwenden Sie http://harvesthq.github.com/chosen/

opengrid
quelle
6
Das hat für mich keine Wirkung. FF 6.0.2
Charlie Schliesser
1
Gute Lösung auch für IE. In meiner Lösung habe ich das enthaltende div-Element auf overflow: hidden gesetzt und dann die Breite der Auswahl vergrößert. Funktioniert super.
Mike
@Charlie S: versuche den Überlauf zu platzieren: versteckt auf dem enthaltenden div. Es funktioniert für mich mit taht
PierrOz
1
Wenn Sie die Dropdown-Liste erweitern, funktioniert der Überlauf: versteckt nicht
Marc
Funktioniert gut für mich. Dadurch wird die Dropdown-Liste etwas breiter als das oberste Bit, aber das ist ein Preis, den ich bereit bin zu zahlen.
Jimbali
26

Wichtiges Update:

Ab Firefox V35 funktioniert die Darstellungseigenschaft jetzt !!

Aus den offiziellen Versionshinweisen von Firefox zu V35 :

Wenn Sie -moz-appearanceden noneWert in einer Combobox verwenden, entfernen Sie jetzt die Dropdown-Schaltfläche (Fehler 649849).

Um den Standardpfeil auszublenden, müssen Sie nun einfach die folgenden Regeln für unser Auswahlelement hinzufügen:

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

DEMO

select {
  margin: 50px;
  border: 1px solid #111;
  background: transparent;
  width: 150px;
  padding: 5px;
  font-size: 16px;
  border: 1px solid #ccc;
  height: 34px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
<select>
  <option>Apples</option>
  <option selected>Pineapples</option>
  <option>Chocklate</option>
  <option>Pancakes</option>
</select>

Danield
quelle
20

Wir haben einen einfachen und anständigen Weg gefunden, dies zu tun. Es ist browserübergreifend, abbaubar und beschädigt keinen Formularbeitrag. Stellen Sie zuerst die Auswahlfelder opacityauf ein 0.

.select { 
    opacity : 0;
    width: 200px;
    height: 15px;
}

<select class='select'>
    <option value='foo'>bar</option>    
</select>

Auf diese Weise können Sie immer noch darauf klicken

Machen Sie dann div mit den gleichen Abmessungen wie das Auswahlfeld. Das div sollte als Hintergrund unter dem Auswahlfeld liegen. Verwenden Sie { position: absolute }und z-indexum dies zu erreichen.

.div {
    width: 200px;
    height: 15px;
    position: absolute;
    z-index: 0;
}

<div class='.div'>{the text of the the current selection updated by javascript}</div>
<select class='select'>
    <option value='foo'>bar</option>    
</select>

Aktualisieren Sie das innerHTML des Div mit Javascript. Einfach mit jQuery:

$('.select').click(function(event)) { 
    $('.div').html($('.select option:selected').val());
}

Das ist es! Gestalten Sie einfach Ihr div anstelle des Auswahlfelds. Ich habe den obigen Code nicht getestet, daher müssen Sie ihn wahrscheinlich anpassen. Aber hoffentlich verstehen Sie das Wesentliche.

Ich denke, diese Lösung schlägt {-webkit-appearance: none;}. Was Browser höchstens tun sollten, ist die Interaktion mit Formularelementen zu diktieren, aber definitiv nicht, wie sie ursprünglich auf der Seite angezeigt werden, da dies das Site-Design beeinträchtigt.

Shaun
quelle
6
Es ist keine schlechte Lösung und ähnelt einem Muster, das ich beim Stylen des Eingabeelements für das Hochladen von Dateien gesehen habe, aber es gibt mehrere Nachteile. Erstens stützt es sich auf JS, was nicht ideal ist. Zweitens, wenn das Formular über eine Schaltfläche zum Zurücksetzen verfügt, müssen Sie diese Funktionalität ebenfalls skripten (im Moment lauscht der JS nur auf das Klicken für das Auswahlelement, reagiert jedoch nicht auf ein form.reset-Ereignis). Das Ersetzen des Auswahlelements durch ein div funktioniert, aber im Idealfall können wir nur das Erscheinungsbild von Formularelementen gestalten. Es gibt auch Probleme mit der Barrierefreiheit, die sowohl das JS- als auch das Standardformularverhalten betreffen.
RussellUresti
14

Versuchen Sie Folgendes:

-webkit-appearance: button;
-moz-appearance: button;

Dann können Sie ein anderes Bild als Hintergrund verwenden und es platzieren:

background-image: url(images/select-arrow.png);
background-position: center right;
background-repeat: no-repeat;

Es gibt einen anderen Weg für Moz-Browser:

text-indent:10px;

Wenn Sie eine Breite für die Auswahl definiert haben, drückt diese Eigenschaft die Standard-Dropbox-Schaltfläche unter dem Auswahlbereich.

Für mich geht das! ;)

ninja_corp
quelle
6

Obwohl es keine vollständige Lösung ist, habe ich festgestellt, dass…

-moz-appearance: window;

… Funktioniert bis zu einem gewissen Grad. Sie können den Hintergrund (-color oder -image) nicht ändern, aber das Element kann mit der Farbe unsichtbar gemacht werden: transparent. Nicht perfekt, aber es ist ein Anfang und Sie müssen das Element auf Systemebene nicht durch ein js-Element ersetzen.

Stuart Badminton
quelle
Ja, mir ist aufgefallen, dass windowdies diesen Effekt hatte. Leider musste ich das Hintergrundbild einstellen. Es ist bedauerlich, dass dies in Firefox nicht sehr gut ist.
RussellUresti
Es ist bedauerlich, dass Sie nicht einen vollständigen Reset anwenden können, um Elemente zu bilden. Sie können den Hintergrund immer fälschen, indem Sie ein Element unter der <Auswahl> haben, was natürlich nicht ideal ist.
Stuart Badminton
1
Dies ist perfekt für den Druck! Setzen Sie einfach einen media="print"CSS-Block mit select {-moz-appearance: window;}und entfernen Sie Pfeile und Hintergründe aller Auswahlmöglichkeiten in FF (für andere Browser versuchen Sie das Erscheinungsbild oder das Webkit-Erscheinungsbild), damit sie wie einfacher Text oder Titel aussehen
FrancescoMM
4

Ich denke, ich fand die Lösung kompatibel mit FF31 !!!
Hier sind zwei Optionen, die unter diesem Link gut erklärt werden:
http://www.currelis.com/hiding-select-arrow-firefox-30.html

Ich habe Option 1 verwendet: Rodrigo-Ludgero hat diesen Fix auf Github veröffentlicht, einschließlich eines Online-Updates Demo. Ich habe diese Demo unter Firefox 31.0 getestet und sie scheint korrekt zu funktionieren. Auch auf Chrome und IE getestet. Hier ist der HTML-Code:

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Custom Select</title>
    <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div class="custom-select fa-caret-down">
            <select name="" id="">
                <option value="">Custom Select</option>
                <option value="">Custom Select</option>
                <option value="">Custom Select</option>
            </select>
        </div>
    </body>
</html>

und das CSS:

.custom-select {
    background-color: #fff;
    border: 1px solid #ccc;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0 0 2em;
    padding: 0;
    position: relative;
    width: 100%;
    z-index: 1;
}

.custom-select:hover {
    border-color: #999;
}

.custom-select:before {
    color: #333;
    display: block;
    font-family: 'FontAwesome';
    font-size: 1em;
    height: 100%;
    line-height: 2.5em;
    padding: 0 0.625em;
    position: absolute;
    top: 0;
    right: 0;
    text-align: center;
    width: 1em;
    z-index: -1;
}

.custom-select select {
    background-color: transparent;
    border: 0 none;
    box-shadow: none;
    color: #333;
    display: block;
    font-size: 100%;
    line-height: normal;
    margin: 0;
    padding: .5em;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.custom-select select::-ms-expand {
    display: none; /* to ie 10 */
}

.custom-select select:focus {
    outline: none;
}
/* little trick for custom select elements in mozilla firefox  17/06/2014 @rodrigoludgero */
:-moz-any(.custom-select):before {
    background-color: #fff; /* this is necessary for overcome the caret default browser */
    pointer-events: none; 
    z-index: 1; /* this is necessary for overcome the pseudo element */
}

http://jsbin.com/pozomu/4/edit

Es funktioniert sehr gut für mich!

Ferocesalatino
quelle
2
Links zu externen Ressourcen werden empfohlen. Fügen Sie jedoch einen Kontext um den Link hinzu, damit Ihre Mitbenutzer eine Vorstellung davon haben, was es ist und warum es dort ist. Zitieren Sie immer den relevantesten Teil eines wichtigen Links, falls die Zielwebsite nicht erreichbar ist oder dauerhaft offline geht.
Andrew Stubbs
Vielen Dank für Vorschläge! Entschuldigung für meine Fehler!
Ferocesalatino
Vielen Dank, dass Sie Ihre Frage bearbeitet haben. Die Frage wird jedoch immer noch nicht von selbst beantwortet . Bitte kopieren Sie die Teile dieser Links, die dem Fragesteller helfen, so dass er sein Problem lösen kann, indem Sie einfach Ihre Antwort lesen.
Andrew Stubbs
2

Leider für Sie , dies ist „etwas Phantasie“. Normalerweise ist es nicht die Aufgabe der Webautoren, Formularelemente neu zu gestalten. In vielen Browsern können Sie sie absichtlich nicht formatieren, damit der Benutzer die Betriebssystemsteuerelemente sehen kann, an die er gewöhnt ist.

Die einzige Möglichkeit, dies konsistent über Browser und Betriebssysteme zu tun, besteht darin, JavaScript zu verwenden und das zu ersetzen select Elemente durch "DHTML" -Elemente zu .

Der folgende Artikel zeigt drei jQuery-basierte Plugins, mit denen Sie dies tun können (es ist ein bisschen alt, aber ich konnte momentan nichts Aktuelles finden).

http://www.queness.com/post/204/25-jquery-plugins-that-enhance-and-beautify-html-form-elements#1

RoToRa
quelle
8
Ich bin nicht der Meinung, dass dies etwas Besonderes ist, obwohl es etwas Experimentelles ist. Der gesamte Zweck der appearanceEigenschaft besteht darin, Entwicklern die Kontrolle über das Erscheinungsbild von Formularelementen zu geben, da die Verwendung von JavaScript eine schreckliche Lösung darstellt. Browser sollten nicht entscheiden, wie etwas auf einer Seite aussieht - es ist eine UX-Entscheidung, keine Entscheidung des Browser-Anbieters. Leider wird es noch nicht gut unterstützt. Vielleicht in einem anderen Jahr.
RussellUresti
Ich denke nicht an "ausgefallen", wenn ich möchte, dass beim Drucken der Seite alle Auswahlen wie ein Feld ohne Pfeile aussehen. Und das sollte meine Wahl sein, nicht der Browser oder das Betriebssystem. Ich habe eine Auswahl mit Monaten, und wenn die Seite gedruckt wird, habe ich ein spezielles CSS für den Druck, bei dem der Pfeil auf der gedruckten Seite entfernt wird, sodass er wie ein Titel "März" ohne Pfeile aussieht, die auf einer aufgerufenen Seite keinen Sinn ergeben.
FrancescoMM
2
/* Try this in FF30+ Covers up the arrow, turns off the background */ 
/* still lets you style the border around the image and allows selection on the arrow */


@-moz-document url-prefix() {

    .yourClass select {
        text-overflow: '';
        text-indent: -1px;
        -moz-appearance: none;
        background: none;

    }

    /*fix for popup in FF30 */
    .yourClass:after {
        position: absolute;
        margin-left: -27px;
        height: 22px;
        border-top-right-radius: 6px;
        border-bottom-right-radius: 6px;
        content: url('../images/yourArrow.svg');
        pointer-events: none;
        overflow: hidden;
        border-right: 1px solid #yourBorderColour;
        border-top: 1px solid #yourBorderColour;
        border-bottom: 1px solid #yourBorderColour; 
    }
}
Todd Bruss
quelle
+20 für den Vorschlag, ein Pseudoelement zu verwenden
Zach Saucier
2

Ich gestalte die Auswahl einfach so

<select style="     -moz-appearance: radio-container;
                -webkit-appearance: none;
                 appearance: none;
">

Es funktioniert für mich in FF, Safari und Chrome in allen Versionen, die ich getestet habe.

Im IE habe ich gesetzt:

 select::-ms-expand {
 display: none;
}
/*to remove in all selects*/

Sie können auch: .yourclass :: - ms-expand {display: none; } .yourid :: - ms-exapan {Anzeige: keine; }}

Alex Moleiro
quelle
1

Ich weiß, dass diese Frage etwas alt ist, aber da sie bei Google auftaucht, ist dies eine "neue" Lösung:

appearance: normalScheint in Firefox für mich gut zu funktionieren (Version 5 jetzt). aber nicht in Opera und IE8 / 9

Als Problemumgehung für Opera und IE9 habe ich den :beforePseudoselector verwendet, um ein neues weißes Feld zu erstellen und dieses über den Pfeil zu setzen.

In IE8 funktioniert dies leider nicht . Die Box wird korrekt gerendert, aber der Pfeil ragt trotzdem heraus ...: - /

Die Verwendung select:beforefunktioniert in Opera einwandfrei, jedoch nicht im Internet Explorer. Wenn ich mir die Entwicklertools ansehe, sehe ich, dass sie die Regeln korrekt lesen und sie dann einfach ignorieren (sie sind durchgestrichen). Also benutze ich eine <span class="selectwrap">um die tatsächliche <select>.

select {
  -webkit-appearance: normal;
  -moz-appearance: normal;
  appearance: normal;
}
.selectwrap { position: relative; }
.selectwrap:before {
  content: "";
  height: 0;
  width: 0;
  border: .9em solid red;
  background-color: red;
  position: absolute;
  right: -.1em;
  z-index: 42;
}

Möglicherweise müssen Sie dies ein wenig optimieren, aber das funktioniert bei mir!

Haftungsausschluss: Ich verwende dies, um eine gut aussehende Hardcopy einer Webseite mit Formularen zu erhalten, sodass ich keine zweite Seite erstellen muss. Ich bin kein 1337 haxx0r, der rote Bildlaufleisten, <marquee>Tags und so weiter möchte :-) Bitte wenden Sie kein übermäßiges Styling auf Formulare an, es sei denn, Sie haben einen sehr guten Grund.

Martin Tournoij
quelle
3
-moz-appearance: normalscheint im Fx 9 keine gültige Option zu sein und -moz-appearance: none(was gültig ist) entfernt den Abwärtspfeil nicht.
Robin Winslow
Ihre Lösung für überlappende Bereiche funktioniert in IE und FF, in Chrome jedoch nicht.
Vulkanischer Rabe
: vor und: nach Pseudoelementen funktionieren nur bei Elementen, die inneren Inhalt akzeptieren. Dies ist weder bei der Auswahl noch bei der Eingabe noch beim Datei-Uploader usw. der Fall. Sie eignen sich hervorragend für Divs, Links, Absätze usw. Der Grund dafür ist, dass sie den Inhalt nicht vor / nach THE ELEMENT selbst anhängen, sondern vor IT'S INHALT. Und ein ausgewähltes Element unterstützt so etwas nicht <select> hi.
João Cunha
1

Verwenden Sie die pointer-eventsEigenschaft.

Die Idee hier ist, ein Element über den nativen Dropdown-Pfeil zu legen (um unser benutzerdefiniertes zu erstellen) und dann Zeigerereignisse darauf zu verbieten. [siehe diesen Beitrag ]

Hier ist eine funktionierende FIDDLE mit dieser Methode.

Außerdem habe ich in dieser SO-Antwort diese und eine andere Methode ausführlicher besprochen.

Danield
quelle
1

Dies funktioniert (getestet unter Firefox 23.0.1):

select {
    -moz-appearance: radio-container;
}
Ixx
quelle
Arbeitete für mich, aber ich mochte keinen radio-containerWert für ein ausgewähltes Objekt. Durchsuchen Sie die Mozilla-Referenz für -moz-Erscheinungsbilder , um einen geeigneten Wert zu erhalten (ich habe verwendet menulist-text, der den Pfeil der Auswahl in FF 31 verbirgt)
sglessard
1

Aufbauend auf der Antwort von @ JoãoCunha, einem CSS-Stil, der für mehr als einen Browser nützlich ist

select {
    /*for firefox*/
    -moz-appearance: none;
    /*for chrome*/
    -webkit-appearance:none;
    text-indent: 0.01px;
    text-overflow: '';
}
/*for IE10*/
select::-ms-expand {
    display: none;
}
Daniël Tulp
quelle
1

Weiter Joao Cunha Antwort ist dieses Problem jetzt auf Mozillas ToDo - Liste und ist für ver 35 ausgerichtet.

Für diejenigen, die es wünschen, gibt es hier eine Problemumgehung von Todd Parker, auf die in Cunhas Blog verwiesen wird und die heute funktioniert:

http://jsfiddle.net/xvushd7x/

HTML:

<label class="wrapper">This label wraps the select
    <div class="button custom-select ff-hack">
        <select>
            <option>Apples</option>
            <option>Bananas</option>
            <option>Grapes</option>
            <option>Oranges</option>
            <option>A very long option name to test wrapping</option>
        </select>
    </div>
</label>

CSS:

/* Label styles: style as needed */
label {
  display:block;
  margin-top:2em;
  font-size: 0.9em;
  color:#777;
}

/* Container used for styling the custom select, the buttom class below adds the bg gradient, corners, etc. */
.custom-select {
  position: relative;
  display:block;
  margin-top:0.5em;
  padding:0;
}

/* These are the "theme" styles for our button applied via separate button class, style as you like */
.button {
  border: 1px solid #bbb;
  border-radius: .3em;
  box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
  background: #f3f3f3; /* Old browsers */
  background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* IE10+ */
  background: linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%); /* W3C */
}

/* This is the native select, we're making everything but the text invisible so we can see the button styles in the wrapper */
.custom-select select {
  width:100%;
  margin:0;
  background:none;
  border: 1px solid transparent;
  outline: none;
  /* Prefixed box-sizing rules necessary for older browsers */
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  /* Remove select styling */
  appearance: none;
  -webkit-appearance: none;
  /* Font size must the 16px or larger to prevent iOS page zoom on focus */
  font-size:16px;
  /* General select styles: change as needed */
  font-family: helvetica, sans-serif;
  font-weight: bold;
  color: #444;
  padding: .6em 1.9em .5em .8em;
  line-height:1.3;
}


/* Custom arrow sits on top of the select - could be an image, SVG, icon font, etc. or the arrow could just baked into the bg image on the select. Note this si a 2x image so it will look bad in browsers that don't support background-size. In production, you'd handle this resolution switch via media query but this is a demo. */

.custom-select::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 8px;
  top: 50%;
  right: 1em;
  margin-top:-4px;
  background-image: url(http://filamentgroup.com/files/select-arrow.png);
  background-repeat: no-repeat;
  background-size: 100%;
  z-index: 2;
  /* These hacks make the select behind the arrow clickable in some browsers */
  pointer-events:none;
}


/* Hover style */
.custom-select:hover {
  border:1px solid #888;
}

/* Focus style */
.custom-select select:focus {
  outline:none;
  box-shadow: 0 0 1px 3px rgba(180,222,250, 1);
  background-color:transparent;
  color: #222;
  border:1px solid #aaa;
}

/* Set options to normal weight */
.custom-select option {
  font-weight:normal;
}
Crashwap
quelle
1

Seit Firefox 35 "-moz-appearance:noneEntfernen Sie " das Sie bereits in Ihren Code geschrieben haben, die Pfeiltaste wie gewünscht.

Es war ein Fehler, der seit dieser Version behoben wurde.

Luca Detomi
quelle
1

Hier und da passieren viele Diskussionen, aber ich sehe keine richtige Lösung für dieses Problem. Zum Schluss schrieb ich einen kleinen Jquery + CSS-Code für diesen HACK in IE & Firefox.

Berechnen Sie die Elementbreite (SELECT Element) mit Jquery. Fügen Sie einen Wrapper um das ausgewählte Element hinzu und halten Sie den Überlauf für dieses Element verborgen. Stellen Sie sicher, dass die Breite dieses Wrappers ungefähr ist. 25px weniger als das von SELECT Element. Dies könnte leicht mit Jquery gemacht werden. So, jetzt ist unsere Ikone weg ..! und es ist Zeit, unser Bildsymbol auf dem SELECT-Element hinzuzufügen ... !!! Fügen Sie einfach ein paar einfache Zeilen zum Hinzufügen des Hintergrunds hinzu und schon sind Sie fertig .. !! Stellen Sie sicher, dass Sie einen Überlauf verwenden, der für die äußere Hülle verborgen ist.

Hier ist ein Codebeispiel, das für Drupal erstellt wurde. Kann jedoch auch für andere verwendet werden, indem nur wenige Codezeilen entfernt werden, die Drupal-spezifisch sind.

/*
 * Jquery Code for Removing Dropdown Arrow.
 * @by: North Web Studio
 */
(function($) {
  Drupal.behaviors.nwsJS = {
    attach: function(context, settings) {
      $('.form-select').once('nws-arrow', function() {
        $wrap_width = $(this).outerWidth();
        $element_width = $wrap_width + 20;
        $(this).css('width', $element_width);
        $(this).wrap('<div class="nws-select"></div>');
        $(this).parent('.nws-select').css('width', $wrap_width);
      });
    }
  };
})(jQuery);
/*
 * CSS Code for Removing Dropdown Arrow.
 * @by: North Web Studio
 */

.nws-select {
  border: 1px solid #ccc;
  overflow: hidden;
  background: url('../images/icon.png') no-repeat 95% 50%;
}
.nws-select .form-select {
  border: none;
  background: transparent;
}

Die Lösung funktioniert auf allen Browsern IE, Chrome und Firefox. Es ist nicht erforderlich, Hacks mit festen Breiten mithilfe von CSS hinzuzufügen. Alles wird dynamisch mit JQuery gehandhabt.!

Weitere Informationen finden Sie unter: - http://northwebstudio.com/blogs/1/jquery/remove-drop-down-arrow-html-select-element-using-jquery-and-css

user3058338
quelle
1

versuchen Sie dieses CSS

select {
    /*for firefox*/
    -moz-appearance: none;
    /*for chrome*/
    -webkit-appearance:none;
}

Es funktioniert

subindas pm
quelle
0

Die appearanceEigenschaft von CSS3 lässt keinen noneWert zu. Schauen Sie sich die W3C-Referenz an . Was Sie also versuchen, ist nicht gültig (Chrome sollte dies auch nicht akzeptieren).

Dann haben wir leider wirklich keine browserübergreifende Lösung, um diesen Pfeil mit reinem CSS auszublenden. Wie bereits erwähnt, benötigen Sie JavaScript.

Ich empfehle Ihnen, das selectBox jQuery-Plugin zu verwenden . Es ist sehr leicht und schön gemacht.

Erick Petrucelli
quelle
1
Aber noneein Wert, der Ansprüche Firefox zu unterstützen: developer.mozilla.org/en/CSS/-moz-appearance Während Formularelemente Styling, in der Vergangenheit hat sich durch JavaScript nur erfüllbar gewesen, die gesamte Punkt der appearanceist Eigentum wegzubewegen davon. Browser-Anbieter sollten keine UX-Entscheidungen für Entwickler treffen. Leider scheint dies nur ein wenig zu neu zu sein, um effektiv genutzt zu werden.
RussellUresti
1
@RussellUresti, obwohl die Beschreibung vom Herstellerpräfix -mozakzeptiert none(auch wenn das funktioniert hat), wäre es nicht korrekt, sie zu verwenden. Noch mehr in Bezug auf einen Browser wie Firefox, der sich immer damit rühmte, genau den Standards zu folgen.
Erick Petrucelli
0

Sie können die Breite des Felds erhöhen und den Pfeil näher an die linke Seite des Pfeils bewegen. Auf diese Weise können Sie den Pfeil mit einem leeren weißen Div abdecken.

Schauen Sie mal rein : http://jsbin.com/aniyu4/86/edit

user909410
quelle
0

Würden Sie geringfügige Änderungen am HTML akzeptieren?

So etwas wie das Einfügen eines div-Tags, das das select-Tag enthält.

Schau mal.

Abgenutzt
quelle
0

Oder Sie können die Auswahl ausschneiden. Etwas in der Art von:

select { width:200px; position:absolute; clip:rect(0, 170px, 50px, 0); }

Dies sollte 30px von der rechten Seite des Auswahlfelds abschneiden und den Pfeil entfernen. Geben Sie nun ein 170px-Hintergrundbild und eine voila-Auswahl an

Dusan Smolnikar
quelle
0

Es ist ein riesiger Hack, -moz-appearance: menulist-textkönnte aber den Trick machen.

Anon
quelle
Dies schien den Auswahlpfeil für mich zu entfernen, aber wie @dendini bemerkte, entfernte es auch alle anderen
Stile
0

Ich hatte das gleiche Problem. Es ist einfach, es auf FF und Chrome zum Laufen zu bringen, aber auf IE (8+, die wir unterstützen müssen) werden die Dinge kompliziert. Die einfachste Lösung, die ich für benutzerdefinierte Auswahlelemente finden konnte, die "überall dort funktioniert, wo ich es versucht habe", einschließlich IE8, ist die Verwendung von .customSelect ()

rafaelbiten
quelle
0

Ein nützlicher Hack für mich ist es, die (Auswahl-) Anzeige auf einzustellen inline-flex. Schneidet den Pfeil direkt aus meiner Auswahlschaltfläche. Ohne den gesamten hinzugefügten Code.

  • Nur für Fx. -webkit appearancewird noch für Chrome benötigt, etc ...
Andrew Ice
quelle
2
Scheint keine Wirkung zu haben
Chris Nicola
0

Jordan Youngs Antwort ist die beste. Wenn Sie Ihren HTML-Code jedoch nicht ändern können oder möchten, können Sie den benutzerdefinierten Abwärtspfeil entfernen, der für Chrome, Safari usw. bereitgestellt wird, und den Standardpfeil von Firefox belassen - ohne dass sich daraus doppelte Pfeile ergeben. Nicht ideal, aber eine gute schnelle Lösung, die kein HTML hinzufügt und Ihr benutzerdefiniertes Aussehen in anderen Browsern nicht beeinträchtigt.

<select>
  <option value='1'> First option </option>
  <option value='2'> Second option </option>
</select>

CSS:

select {
   background-image: url('images/select_arrow.gif');
   background-repeat: no-repeat;
   background-position: right center;
   padding-right: 20px;
}

@-moz-document url-prefix() {
  select {
    background-image: none;
  }
}
squarecandy
quelle
0

hackity hack ... eine Lösung, die in jedem von mir getesteten Browser (Safari, Firefox, Chrome) funktioniert. Es liegen keine IEs herum, daher wäre es schön, wenn Sie testen und kommentieren könnten:

<div class="wrapper">
  <select>
    <option>123456789</option>
    <option>234567890</option>
  </select>
</div>

CSS mit URL-codiertem Bild:

.wrapper { position:relative; width:200px; }
.wrapper:after {
  content:"";
  display: block;
  position: absolute;
  top:1px; height:28px;
  right:1px; width:16px;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAcCAYAAACH81QkAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowODgwMTE3NDA3MjA2ODExOEE2RENENTU2MTFGMEQ1RCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpGNDE5NDQ3Nzc5ODIxMUU0OEU0M0JFMzgzMkUxOTk3MiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpGNDE5NDQ3Njc5ODIxMUU0OEU0M0JFMzgzMkUxOTk3MiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MDk4MDExNzQwNzIwNjgxMThBNkRDRDU1NjExRjBENUQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDg4MDExNzQwNzIwNjgxMThBNkRDRDU1NjExRjBENUQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4o7anbAAAAjklEQVR42uzUsQ3EIAwFUPty7MBOsAoVC7EVYgyUSFcdzn0iJYquAZGSLxnLzatsWERWGsvGP0QGkc+LxvN9AqGJTKQJMcYQM/+VtbZdiTGKUgr3cxbmlJI0ZiW83vsbgrkjB5JzFq11BdAxdyNICKEi6J25kFKKOOdq70We+JS2ufYTacjyxrKMLtsuwAAznzqGLHX9BwAAAABJRU5ErkJggg==);

  pointer-events: none;
}

select {
  width: 100%;
  padding:3px;
  margin: 0;
  border-radius: 0;
  border:1px solid black;
  outline:none;
  display: inline-block;
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  cursor:pointer;
  float:none!important;
  background:white;

  font-size:13px;
  line-height: 1em;
  height: 30px;
  padding:6px 20px 6px 10px;
}

http://codepen.io/anon/pen/myPEBy

Ich benutze das: after-Element, um den hässlichen Pfeil abzudecken. Da select nicht unterstützt: nachher brauche ich einen Wrapper, mit dem ich arbeiten kann. Wenn Sie jetzt auf den Pfeil klicken, wird er in der Dropdown-Liste nicht registriert ... es sei denn, Ihr Browser unterstützt dies pointer-events: none, was alle außer IE10 tun: http://caniuse.com/#feat=pointer-events

Für mich ist es also perfekt - eine schöne, saubere Lösung mit wenig Kopfschmerzen, zumindest im Vergleich zu allen anderen Optionen, die Javascript enthalten.

tl; dr:

Wenn IE10-Benutzer (oder niedriger) auf den Pfeil klicken, funktioniert dies nicht. Funktioniert gut genug für mich ...

Sebastian Schmid
quelle
0

Wenn es Ihnen nichts ausmacht, mit JS herumzuspielen, habe ich ein kleines jQuery-Plugin geschrieben, das Ihnen dabei hilft. Damit müssen Sie sich keine Gedanken über Herstellerpräfixe machen.

 $.fn.magicSelectBox = function() {
  var $e = this;

  $e.each(function() {
    var $select = $(this);

    var $magicbox = $('<div></div>').attr('class', $select.attr('class')).attr('style', $select.attr('style')).addClass('magicbox');
    var $innermagicbox = $('<div></div>').css({
      position: 'relative',
      height: '100%'
    });
    var $text = $('<span></span>').css({
      position: 'absolute'
    }).text($select.find("option:selected").text());

    $select.attr('class', null).css({
      width: '100%',
      height: '100%',
      opacity: 0,
      position: 'absolute'
    }).on('change', function() {
      $text.text($select.find("option:selected").text());
    });

    $select.parent().append($magicbox);
    $innermagicbox.append($text, $select);
    $magicbox.append($innermagicbox);
  });

  return $e;
};

Geige hier: JS Geige

Die Bedingung ist, dass Sie die Auswahl von Grund auf neu gestalten müssen (dies bedeutet, dass Hintergrund und Rahmen festgelegt werden), aber Sie möchten dies wahrscheinlich trotzdem tun.

Da die Funktion die ursprüngliche Auswahl durch ein div ersetzt, verlieren Sie jegliches Styling, das direkt auf der Auswahlauswahl in Ihrem CSS vorgenommen wurde. Geben Sie dem select-Element also eine Klasse und formatieren Sie die Klasse.

Unterstützt die meisten modernen Browser. Wenn Sie ältere Browser ansprechen möchten, können Sie eine ältere Version von jQuery ausprobieren, müssen jedoch möglicherweise on () durch bind () in der Funktion ersetzen (nicht getestet).

Hydde87
quelle
-2

Die anderen Antworten schienen für mich nicht zu funktionieren, aber ich fand diesen Hack. Das hat bei mir funktioniert (Juli 2014)

select {
-moz-appearance: textfield !important;
    }

In meinem Fall hatte ich auch ein Woocommerce-Eingabefeld, also habe ich dieses verwendet

.woocommerce .quantity input.qty {
-moz-appearance: textfield !important;
 }

Meine Antwort wurde aktualisiert, um Auswahl statt Eingabe anzuzeigen

Sol
quelle
input.input-text? Was hat das mit der Auswahloption und der gestellten Frage zu tun?
Dendini