Jak usunąć strzałkę z wybranego elementu w przeglądarce Firefox

172

Próbuję stylizować selectelement za pomocą CSS3. Otrzymuję pożądane wyniki w WebKit (Chrome / Safari), ale Firefox nie działa dobrze (nawet nie zawracam sobie głowy IE). Używam appearancewłaściwości CSS3 , ale z jakiegoś powodu nie mogę usunąć ikony rozwijanej z przeglądarki Firefox.

Oto przykład tego, co robię: 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;
}

Jak widać, nie staram się o nic wymyślnego. Chcę tylko usunąć domyślne style i dodać własną strzałkę w dół. Jak powiedziałem, świetnie w WebKit, nie świetny w Firefoksie. Najwyraźniej -moz-appearance: nonenie usuwa elementu rozwijanego.

Jakieś pomysły? Nie, JavaScript nie wchodzi w grę

RussellUresti
źródło
3
Jest teraz raport o błędzie na ten temat: bugzilla.mozilla.org/show_bug.cgi?id=649849
sneilan.
3
Chosen to biblioteka JavaScript, która stylizuje wybrane przez Ciebie elementy i sprawia, że ​​wyglądają naprawdę fantazyjnie. Warto się temu przyjrzeć, chociaż prawdopodobnie nie rozwiąże to problemu.
stephenmurdoch
Ten post może Ci się przydać: red-team-design.com/making-html-dropdowns-not-suck
Rui Marques,
1
Wygląda na to, że dodali -moz-appearancewłaściwość CSS3, której używam -moz-appearance: none;i wygląda na to, że działa w wersji 35.0.1.
Tony M
Prostą poprawką byłoby poszerzenie zaznaczonego elementu niż kontener. I zawiń prefiks adresu URL Mozilli, aby opcje były szersze tylko w Firefoksie. @-moz-document url-prefix() { select { width: 105%; overflow: hidden; } }
Luke Femur

Odpowiedzi:

78

Okej, wiem, że to pytanie jest stare, ale 2 lata później i mozilla nic nie zrobiła.

Wymyśliłem proste obejście.

To zasadniczo usuwa całe formatowanie pola wyboru w przeglądarce Firefox i zawija element span wokół pola wyboru za pomocą własnego stylu, ale powinno mieć zastosowanie tylko do przeglądarki Firefox.

Powiedz, że to jest Twoje menu wyboru:

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

Załóżmy, że klasa css „css-select” to:

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

W Firefoksie wyświetlałoby się to z menu wyboru, a następnie brzydką strzałką wyboru Firefoksa, a następnie ładnie wyglądającą, niestandardową strzałką. Nieidealny.

Teraz, aby to działało w przeglądarce Firefox, dodaj element span z klasą `` css-select-moz '':

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

Następnie napraw CSS, aby ukryć brudną strzałkę Mozilli za pomocą -moz-look: window i wrzuć niestandardową strzałkę do klasy span 'css-select-moz', ale wyświetl ją tylko w Mozilli, na przykład:

.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;
  }
} 

Całkiem fajnie, że natknąłem się na ten błąd tylko 3 godziny temu (jestem nowy w projektowaniu stron internetowych i całkowicie samouk). Jednak ta społeczność pośrednio udzieliła mi tak dużej pomocy, że pomyślałem, że nadszedł czas, aby coś w zamian dać.

Testowałem go tylko w przeglądarce Firefox (Mac) w wersji 18, a następnie 22 (po aktualizacji).

Wszelkie opinie są mile widziane.

Jordan Young
źródło
2
A po 2 latach jest to najlepsza odpowiedź, jaka została opublikowana, aby osiągnąć pożądany rezultat. Umieściłem JSBin kodu tutaj: jsbin.com/aniyu4/2440/edit, aby inni mogli je przeglądać, i zrobiłem tylko jedną drobną aktualizację CSS. Rozpiętość była szersza niż wybrana w FF, ze względu na odpowiednie wypełnienie - oznaczało to, że kliknięcie strzałki nie aktywowało rozwijanego menu. Aby to skorygować, umieściłem ujemny prawy margines na elemencie zaznaczenia, aby z powrotem wciągnąć szerokość rozpiętości, aby pokryć szerokość zaznaczenia.
RussellUresti
Oczywiście! Bardzo dziękuję, Russell. Naprawdę się cieszę, że to pomogło.
Jordan Young,
5
Nie działał dla mnie na FF 23-24 w Windows (próbowałem jsbin w komentarzu). Skończyło się na użyciu tis obejścia stackoverflow.com/questions/6787667/ ...
Esteban
4
Nie działa już na FF 30. Proszę śmiało i prześlij zgłoszenie na stronie Mozilli: bugzilla.mozilla.org/show_bug.cgi?id=649849 . Im więcej osób narzeka, tym większa szansa, że ​​to naprawią.
Stan
1
Działa na FF 31 tylko na Macu.
Erwin Wessels,
165

Aktualizacja: naprawiono to w przeglądarce Firefox v35. Zobacz pełną treść szczegółów.


Właśnie wymyśliłem, jak usunąć strzałkę wyboru z przeglądarki Firefox . Sztuką jest wykorzystanie mieszankę -prefix-appearance, text-indenti text-overflow. Jest to czysty CSS i nie wymaga dodatkowych znaczników.

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

Testowane na Windows 8, Ubuntu i Mac, najnowsze wersje przeglądarki Firefox.

Przykład na żywo: http://jsfiddle.net/joaocunha/RUEbp/1/

Więcej na ten temat: https://gist.github.com/joaocunha/6273016

João Cunha
źródło
1
Mam specjalne miejsce w moim zwykle zimnym sercu na takie niecodzienne poprawki. To raczej genialne. Jedynym minusem jest to, że FF pozostawia spację na końcu rozwijanego obszaru tekstowego (między rzeczywistym tekstem a końcem pola wyboru), co tworzy niespójne odstępy między FF a innymi przeglądarkami, ale to tylko drobna kwestia. Niezłe znalezisko.
RussellUresti
Niezły chwyt, @RussellUresti. Ale biorąc pod uwagę, że cały pomysł może polegać na dostarczeniu zmodyfikowanej strzałki, przestrzeń faktycznie okazuje się przydatna. Bawiłem się tym trochę i dodając padding-right:10px;do <select>woli „pchnąłem” teraz niewidzialną strzałkę w lewo. Konkluzja: Firefox UKRYWA strzałkę, Chrome USUWA ją. Odpowiednio zaktualizuję moje pisma, dzięki za to.
João Cunha
Dodałem trochę crossbrowsera (nie testowałem w starszych wersjach IE) jako odpowiedź, abyś mógł zaktualizować swoją
Daniël Tulp
2
Najlepsze rozwiązanie dla mnie, ponieważ -moz-appearence: windownie działa z przezroczystymi tłami (narysuj brzydki bg w miejscu, przynajmniej na Firefox Linuksie)
kik
Ponieważ to całkowicie usuwa strzałkę, wynikowy <select> wygląda jak pole tekstowe i jest raczej brzydki. Możesz więc dodać obraz tła z powrotem, aby wyglądał jak lista
thom_nic
59

Sztuczka, która działa w moim przypadku, polega na wybraniu szerokości większej niż 100% i zastosowaniu przepełnienia: ukryty

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

W tej chwili jest to jedyny sposób, aby ukryć strzałkę w dół w FF.

BTW. jeśli chcesz mieć piękne listy rozwijane, użyj http://harvesthq.github.com/chosen/

opengrid
źródło
6
Nie ma to dla mnie żadnego efektu. FF 6.0.2
Charlie Schliesser
1
Dobre rozwiązanie również dla IE. W moim rozwiązaniu ustawiłem zawierający element div na przepełnienie: ukryty, a następnie zwiększyłem szerokość zaznaczenia. Działa świetnie.
Mike
@Charlie S: spróbuj umieścić przepełnienie: ukryte w zawierającym div. To działa dla mnie z
taht
1
kiedy rozwiniesz menu, przepełnienie: ukryte nie działa
Marc
U mnie działa dobrze. To sprawia, że ​​lista rozwijana jest nieco szersza niż górna część, ale jest to cena, którą jestem gotów zapłacić.
Jimbali
26

Ważna aktualizacja:

Od wersji Firefox V35 właściwość wyglądu działa teraz !!

Z oficjalnych informacji o wydaniu Firefoksa na V35 :

Użycie -moz-appearancez nonewartością w polu kombi powoduje teraz usunięcie przycisku rozwijania (błąd 649849).

Więc teraz, aby ukryć domyślną strzałkę - jest to tak proste, jak dodanie następujących reguł do naszego elementu select:

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

PRÓBNY

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
źródło
20

Znaleźliśmy na to prosty i przyzwoity sposób. Jest cross-browser, degradowalny i nie psuje postu formularza. Najpierw ustaw pole wyboru opacityna 0.

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

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

dzięki temu nadal możesz go kliknąć

Następnie utwórz element div o takich samych wymiarach jak pole wyboru. Element div powinien znajdować się pod polem wyboru jako tło. Użyj { position: absolute }i, z-indexaby to osiągnąć.

.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>

Zaktualizuj innerHTML elementu div za pomocą javascript. Easypeasy z jQuery:

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

Otóż ​​to! Po prostu stylizuj swój element div zamiast pola wyboru. Nie testowałem powyższego kodu, więc prawdopodobnie będziesz potrzebować go ulepszyć. Ale miejmy nadzieję, że rozumiesz sedno.

Myślę, że to rozwiązanie bije {-webkit-appearance: none;}. Przeglądarki powinny co najwyżej dyktować interakcję z elementami formularza, ale na pewno nie sposób ich początkowego wyświetlania na stronie, ponieważ to psuje projekt witryny.

Shaun
źródło
6
Nie jest to złe rozwiązanie i jest podobne do wzorca, który widziałem do stylizacji elementu wejściowego przesyłania pliku, ale ma kilka wad. Po pierwsze, opiera się na JS, który nie jest idealny. Po drugie, jeśli formularz ma przycisk resetowania, musisz również skrypty tej funkcji (w tej chwili JS słucha tylko kliknięcia elementu select, ale nie reaguje na zdarzenie form.reset). Zastąpienie zaznaczonego elementu elementem div zadziała, ale najlepiej byłoby po prostu stylizować wygląd elementów formularza. Istnieją również problemy z dostępnością dotyczące zarówno JS, jak i domyślnego zachowania formularzy.
RussellUresti
14

Spróbuj w ten sposób:

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

Następnie możesz użyć innego obrazu jako tła i umieścić go:

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

Jest inny sposób dla przeglądarek Moz:

text-indent:10px;

Jeśli masz zdefiniowaną szerokość do wybrania, ta właściwość spowoduje naciśnięcie przycisku domyślnej skrzynki rozwijanej pod obszarem wyboru.

Mi to pasuje! ;)

ninja_corp
źródło
6

Chociaż nie jest to kompletne rozwiązanie, stwierdziłem, że…

-moz-appearance: window;

… Działa do pewnego stopnia. Nie możesz zmienić tła (-kolor lub -obraz), ale element może być niewidoczny za pomocą koloru: przezroczysty. Nie jest to idealne rozwiązanie, ale to początek i nie trzeba wymieniać elementu poziomu systemu na element js.

Stuart Badminton
źródło
Tak, zauważyłem, że windowmiało taki efekt, niestety musiałem ustawić obraz tła. Szkoda, że ​​nie jest to zbyt dobre w Firefoksie.
RussellUresti
Szkoda, że ​​nie możesz zastosować pełnego resetu do elementów formularza, tak. Zawsze możesz sfałszować tło, umieszczając element pod <select>, co oczywiście nie jest idealne.
Stuart Badminton
1
To jest IDEALNE do druku! Po prostu ustaw media="print"blok css za pomocą select {-moz-appearance: window;}i usunie strzałki i tła wszystkich zaznaczeń na FF (w przypadku innych przeglądarek wypróbuj wygląd lub wygląd zestawu webkit), aby wyglądały jak zwykły tekst lub tytuły
FrancescoMM
4

Myślę, że znalazłem rozwiązanie zgodne z FF31 !!!
Oto dwie opcje, które są dobrze wyjaśnione pod tym linkiem:
http://www.currelis.com/hiding-select-arrow-firefox-30.html

Użyłem opcji 1: Rodrigo-Ludgero opublikował tę poprawkę na Github, w tym online próbny. Testowałem to demo w przeglądarce Firefox 31.0 i wygląda na to, że działa poprawnie. Przetestowano również w Chrome i IE. Oto kod html:

<!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>

i 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

To działa bardzo dobrze dla mnie!

ferocesalatino
źródło
2
Zachęcamy do umieszczania linków do zewnętrznych zasobów, ale proszę dodać kontekst wokół łącza, aby inni użytkownicy mieli pojęcie, co to jest i dlaczego się tam znajduje. Zawsze cytuj najbardziej odpowiednią część ważnego linku, na wypadek gdyby strona docelowa była nieosiągalna lub została trwale wyłączona.
Andrew Stubbs
Dziękuję za sugestie! Przepraszam za moje wady!
ferocesalatino
Dzięki za edycję pytanie, jednak jeszcze nie właściwie odpowiedzieć na to pytanie sam . Skopiuj te części linków, które pomogą pytającemu, tak aby mógł rozwiązać swój problem, po prostu czytając Twoją odpowiedź.
Andrew Stubbs,
2

Niestety dla ciebie to jest „coś nadzwyczajnego”. Zwykle nie jest to miejsce dla autorów stron internetowych, aby przeprojektowywać elementy formularzy. Wiele przeglądarek celowo nie pozwala na ich stylizację, aby użytkownik mógł zobaczyć kontrolki systemu operacyjnego, do których jest przyzwyczajony.

Jedynym sposobem, aby to zrobić konsekwentnie w przeglądarkach i systemach operacyjnych, jest użycie JavaScript i zastąpienie select elementów elementami „DHTML”.

Poniższy artykuł pokazuje trzy wtyczki oparte na jQuery, które pozwalają ci to zrobić (jest trochę stary, ale nie mogłem znaleźć nic aktualnego)

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

RoToRa
źródło
8
Nie zgadzam się, że to coś wymyślnego, chociaż jest to coś eksperymentalnego. Celem tej appearancewłaściwości jest zapewnienie programistom kontroli nad wyglądem elementów formularza, ponieważ używanie JavaScript do tego jest okropnym rozwiązaniem. Przeglądarki nie powinny podejmować decyzji o tym, jak cokolwiek wygląda na stronie - jest to decyzja dotycząca UX, a nie decyzja producenta przeglądarki. Niestety, nie jest jeszcze dobrze obsługiwany. Może za rok.
RussellUresti
Nie uważam za „fantazyjne”, jeśli chcę, aby po wydrukowaniu strony wszystkie zaznaczenia wyglądały jak pola bez strzałek. I to powinien być mój wybór, a nie przeglądarka czy wybór systemu operacyjnego. Mam wybór z miesiącami, a kiedy strona jest drukowana, mam specjalny arkusz CSS do drukowania, który usuwa strzałkę na drukowanej stronie, dzięki czemu wygląda jak tytuł „Marzec” bez strzałek, które nie mają sensu na wydrukowanej stronie.
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
źródło
+20 za sugestię użycia pseudoelementu
Zach Saucier.
2

Stylizuję wybrany po prostu to lubi

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

Działa u mnie w FF, Safari i Chrome we wszystkich testowanych wersjach.

W IE umieściłem:

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

Możesz także: .yourclass :: - ms-expand {display: none; } .yourid :: - ms-exapan {display: none; }

Alex Moleiro
źródło
1

Wiem, że to pytanie jest trochę stare, ale ponieważ pojawia się w Google, a to jest „nowe” rozwiązanie:

appearance: normalWydaje się, że działa dobrze w Firefoksie dla mnie (teraz wersja 5). ale nie w Operze i IE8 / 9

Jako obejście dla Opery i IE9 użyłem :before problem w pseudoselektora, aby utworzyć nowe białe pole i umieścić je na górze strzałki.

Niestety w IE8 tak nie jest działa. Pudełko jest renderowane poprawnie, ale strzałka i tak odstaje ...: - /

Używanie select:beforedziała dobrze w Operze, ale nie w IE. Jeśli spojrzę na narzędzia programistyczne, widzę, że czyta poprawnie zasady, a następnie je po prostu ignoruje (są przekreślone). Więc używam <span class="selectwrap">około rzeczywistego <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;
}

Być może będziesz musiał to trochę poprawić, ale to działa dla mnie!

Zastrzeżenie: Używam tego, aby uzyskać ładnie wyglądającą drukowaną stronę internetową z formularzami, więc nie muszę tworzyć drugiej strony. Nie jestem 1337 haxx0r, który chce czerwonych pasków przewijania, <marquee>tagów i tak dalej :-) Proszę nie stosować nadmiernego stylu do formularzy, chyba że masz bardzo dobry powód.

Martin Tournoij
źródło
3
-moz-appearance: normalnie wydaje się być poprawną opcją w Fx 9 i -moz-appearance: none(co jest poprawne) nie usuwa strzałki w dół.
Robin Winslow,
Twoje rozwiązanie pokrywającego się zakresu działa w IE i FF, ale nie działa w Chrome.
vulcan raven
: before i: after pseudoelementy działają tylko na elementach akceptujących wewnętrzną zawartość. Tak nie jest w przypadku wyboru ani wejścia, ani programu do przesyłania plików itp. Świetnie nadają się do div, linków, akapitów itp. Powodem tego jest to, że dodają treść nie przed / po samym ELEMENTU, ale przed JEGO. ZADOWOLONY. A element typu select nie obsługuje czegoś takiego jak <select> hi.
João Cunha
1

Skorzystaj z pointer-eventsnieruchomości.

Pomysł polega na tym, aby nałożyć element na natywną strzałkę rozwijaną w dół (aby utworzyć naszą niestandardową), a następnie zablokować zdarzenia wskaźnika. [zobacz ten post ]

Oto działające FIDDLE używające tej metody.

Również w tej odpowiedzi SO omówiłem bardziej szczegółowo tę i inną metodę.

Danield
źródło
1

To działa (testowane w przeglądarce Firefox 23.0.1):

select {
    -moz-appearance: radio-container;
}
Ixx
źródło
U mnie zadziałało, ale nie lubiłem radio-containerwartości dla wybranego obiektu. Przeglądaj odwołanie do -moz-wyglądy Mozilli, aby uzyskać odpowiednią wartość (użyłem, menulist-textktóra ukrywa strzałkę wyboru w FF 31)
sglessard
1

opierając się na odpowiedzi @ JoãoCunha, jednym stylu CSS, który jest przydatny dla więcej niż jednej przeglądarki

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
źródło
1

W nawiązaniu do odpowiedzi Joao Cunhy , ten problem znajduje się teraz na liście zadań do wykonania Mozilli i jest przeznaczony dla wersji 35.

Dla tych, którzy chcą, oto obejście Todda Parkera, do którego odwołuje się blog Cunha, które działa dzisiaj:

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
źródło
1

Od Firefoksa 35, " -moz-appearance:none" który już zapisałeś w swoim kodzie, ostatecznie usuń przycisk strzałki zgodnie z potrzebami.

To był błąd rozwiązany od tej wersji.

Luca Detomi
źródło
1

Wiele dyskusji dzieje się tu i tam, ale nie widzę odpowiedniego rozwiązania tego problemu. Ostatecznie skończyło się na napisaniu małego kodu Jquery + CSS do zrobienia tego hacka na IE i Firefox.

Oblicz szerokość elementu (wybierz element) za pomocą Jquery. Dodaj opakowanie wokół zaznaczonego elementu i ukryj przepełnienie dla tego elementu. Upewnij się, że szerokość tego opakowania wynosi ok. 25 pikseli mniej niż w przypadku elementu SELECT. Można to łatwo zrobić za pomocą Jquery. Więc teraz nasza ikona zniknęła ...! i pora na dodanie naszej ikony obrazka do elementu SELECT ... !!! Wystarczy dodać kilka prostych wierszy, aby dodać tło i gotowe .. !! Upewnij się, że używasz przelewu ukrytego dla zewnętrznego opakowania,

Oto przykład kodu, który został wykonany dla Drupala. Jednak może być użyty dla innych również poprzez usunięcie kilku linii kodu, który jest specyficzny dla Drupala.

/*
 * 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;
}

Rozwiązanie działa na wszystkich przeglądarkach IE, Chrome i Firefox Nie ma potrzeby dodawania hacków o stałej szerokości za pomocą CSS. To wszystko jest obsługiwane dynamicznie za pomocą JQuery.!

Więcej opisane na: - http://northwebstudio.com/blogs/1/jquery/remove-drop-down-arrow-html-select-element-using-jquery-and-css

user3058338
źródło
1

spróbuj tego css

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

To działa

subindas pm
źródło
0

appearanceNieruchomość z CSS3 nie zezwala na nonewartości. Spójrz na referencje W3C . Więc to, co próbujesz zrobić, nie jest prawidłowe (w rzeczywistości Chrome też nie powinien akceptować).

Niestety, tak naprawdę nie mamy żadnego rozwiązania dla różnych przeglądarek, aby ukryć tę strzałkę za pomocą czystego CSS. Jak wskazano, będziesz potrzebować JavaScript.

Proponuję rozważyć użycie wtyczki selectBox jQuery . Jest bardzo lekki i ładnie wykonany.

Erick Petrucelli
źródło
1
Ale noneJEST wartością, którą Firefox twierdzi, że obsługuje: developer.mozilla.org/en/CSS/-moz-appearance Podczas gdy w przeszłości stylizowanie elementów formularzy było możliwe tylko za pomocą JavaScript, celem tej appearancewłaściwości jest odejście z tego. Dostawcy przeglądarek nie powinni podejmować decyzji dotyczących UX dla programistów. Niestety, po prostu wydaje się, że jest to wciąż zbyt nowe, aby skutecznie używać.
RussellUresti
1
@RussellUresti, dlatego nawet jeśli opis z prefiksu dostawcy -mozakceptuje none(nawet jeśli to zadziałało), nie byłoby poprawne jego użycie. Jeszcze bardziej w przypadku przeglądarki takiej jak Firefox, która zawsze szczyciła się dokładnym przestrzeganiem standardów.
Erick Petrucelli
0

Możesz zwiększyć szerokość pola i przesunąć strzałkę bliżej lewej strzałki. pozwala to następnie zakryć strzałkę pustym białym elementem div.

Spójrz: http://jsbin.com/aniyu4/86/edit

user909410
źródło
0

Czy zaakceptowałbyś drobne zmiany w HTML?

Coś jak umieszczenie znacznika DIV zawierającego znacznik wyboru.

Spójrz.

Galled
źródło
0

Lub możesz przyciąć zaznaczenie. Coś w rodzaju:

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

Powinno to przyciąć 30px prawej strony pola wyboru, usuwając strzałkę. Teraz dostarcz obraz tła 170px i voila, stylizowany wybór

Dusan Smolnikar
źródło
0

To ogromny hack, ale -moz-appearance: menulist-textmoże załatwić sprawę.

Zaraz
źródło
Wydawało się, że usunęło to dla mnie strzałkę wyboru, ale jak zauważył @dendini, usunęło również całą inną stylizację elementu
codestr
0

Miałem ten sam problem. Łatwo jest sprawić, by działał na FF i Chrome, ale w IE (8+, który musimy obsługiwać) sprawy się komplikują. Najłatwiejszym rozwiązaniem, jakie udało mi się znaleźć dla niestandardowych wybranych elementów, które działają „wszędzie, gdzie próbowałem”, w tym IE8, jest użycie .customSelect ()

rafaelbiten
źródło
0

Przydatnym dla mnie hackem jest ustawienie (wybiera) wyświetlania na inline-flex. Wycina strzałkę bezpośrednio z mojego przycisku wyboru. Bez całego dodanego kodu.

  • Tylko dla Fx. -webkit appearancenadal potrzebne w przeglądarce Chrome itp ...
Andrew Ice
źródło
2
Wydaje się, że nie ma to żadnego efektu
Chris Nicola
0

Odpowiedź Jordana Younga jest najlepsza. Ale jeśli nie możesz lub nie chcesz zmienić kodu HTML, możesz rozważyć po prostu usunięcie niestandardowej strzałki w dół wyświetlanej w Chrome, Safari itp. I pozostawienie domyślnej strzałki Firefoksa - ale bez podwójnych strzałek. Nie jest to idealne rozwiązanie, ale dobra szybka poprawka, która nie dodaje żadnego kodu HTML i nie wpływa na Twój niestandardowy wygląd w innych przeglądarkach.

<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
źródło
0

hackity hack ... rozwiązanie, które działa w każdej testowanej przeze mnie przeglądarce (Safari, Firefox, Chrome). Nie masz żadnych IE, więc byłoby miło, gdybyś mógł przetestować i skomentować:

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

CSS, z obrazem zakodowanym w adresie URL:

.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

Używam elementu: after, aby zakryć brzydką strzałę. Ponieważ funkcja Select nie obsługuje: po tym potrzebuję opakowania do pracy. Teraz, jeśli klikniesz strzałkę, pointer-events: nonelista rozwijana nie zarejestruje jej ... chyba że Twoja przeglądarka obsługuje , co robi każdy oprócz IE10: http://caniuse.com/#feat=pointer-events

Więc dla mnie jest to idealne - ładne, czyste rozwiązanie, które nie powoduje bólu głowy, przynajmniej w porównaniu ze wszystkimi innymi opcjami, które zawierają javascript.

tl; dr:

Jeśli użytkownicy IE10 (lub starsze) klikną strzałkę, to nie zadziała. Działa wystarczająco dobrze dla mnie ...

Sebastian Schmid
źródło
0

Jeśli nie masz nic przeciwko majstrowaniu przy JS, napisałem małą wtyczkę jQuery, która pomoże ci to zrobić. Dzięki niemu nie musisz martwić się o prefiksy dostawców.

 $.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;
};

Fiddle tutaj: JS Fiddle

Warunkiem jest to, że musisz stylizować zaznaczenie od zera (oznacza to ustawienie tła i obramowania), ale prawdopodobnie i tak chcesz to zrobić.

Ponieważ funkcja zastępuje oryginalne zaznaczenie elementem div, utracisz wszelkie style wykonane bezpośrednio na selektorze wyboru w CSS. Więc nadaj elementowi select klasę i nadaj jej styl.

Obsługuje większość nowoczesnych przeglądarek, jeśli chcesz kierować reklamy na starsze przeglądarki, możesz wypróbować starszą wersję jQuery, ale być może trzeba będzie zastąpić on () bind () w funkcji (nie testowane)

Hydde87
źródło
-2

Inne odpowiedzi wydawały się nie działać dla mnie, ale znalazłem ten hack. To zadziałało dla mnie (lipiec 2014)

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

W moim przypadku miałem również pole wejściowe woocommerce, więc użyłem tego

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

Zaktualizowałem moją odpowiedź, aby pokazać raczej wybór niż dane wejściowe

Sol
źródło
input.input-text? co to ma wspólnego z zaznaczeniem opcji i zadanym pytaniem?
dendini,