Usuń kontur z pola wyboru w FF

Czy można usunąć przerywaną linię otaczającą wybrany element w wybranym elemencie?

Próbowałem dodać outlinewłaściwość w CSS, ale to nie działało, przynajmniej nie w FF.

<style>
   select { outline:none; }
</style>

Aktualizacja
Zanim przejdziesz dalej i usuniesz konspekt, przeczytaj to.
http://www.outlinenone.com/

Znalazłem rozwiązanie, ale jest matką wszystkich hacków, mam nadzieję, że posłuży jako punkt wyjścia dla innych, solidniejszych rozwiązań. Wadą (moim zdaniem zbyt dużym) jest to, że każda przeglądarka, która nie obsługuje, text-shadowale obsługuje rgba(IE 9), nie wyrenderuje tekstu, chyba że użyjesz biblioteki takiej jak Modernizr (nie przetestowana, tylko teoria).

Firefox używa koloru tekstu do określenia koloru przerywanej ramki. Więc powiedz, jeśli to zrobisz ...

select {
  color: rgba(0,0,0,0);
}

Firefox wyrenderuje przerywaną ramkę jako przezroczystą. Ale oczywiście twój tekst też będzie przezroczysty! Musimy więc jakoś wyświetlić tekst. text-shadowprzychodzi na ratunek:

select {
  color: rgba(0,0,0,0);
  text-shadow: 0 0 0 #000;
}

Umieściliśmy cień tekstu bez przesunięcia i bez rozmycia, aby zastąpić tekst. Oczywiście starsza przeglądarka nic z tego nie rozumie, więc musimy zapewnić rezerwę dla koloru:

select {
  color: #000;
  color: rgba(0,0,0,0);
  text-shadow: 0 0 0 #000;
}

Wtedy do gry wkracza IE9: obsługuje on, rgbaale nie obsługuje cień tekstu, więc otrzymasz pozornie puste pole wyboru. Pobierz swoją wersję Modernizr z text-shadowwykrywaniem i zrób ...

.no-textshadow select {
  color: #000;
}

Cieszyć się.

Cóż, odpowiedź Duopixel jest po prostu doskonała. Jeśli pójdziemy o krok dalej, możemy uczynić go kuloodpornym.

select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
}

Proszę bardzo, działa tylko w przeglądarce Firefox i brzydki kropkowany kontur wokół wybranej opcji zniknął.

Oto współpraca rozwiązań pozwalających rozwiązać problemy ze stylem w polach wyboru przeglądarki Firefox. Użyj tego selektora CSS jako części swojego zwykłego resetowania CSS.

Klasa usuwa kontur zgodnie z pytaniem, ale także usuwa obraz tła (ponieważ zwykle używam niestandardowej strzałki rozwijanej i strzałki rozwijanej systemu Firefoxes nie można obecnie usunąć). Jeśli używasz obrazu tła dla czegoś innego niż obraz rozwijany, po prostu usuń liniębackground-image: none !important;

@-moz-document url-prefix() {
    select, select:-moz-focusring, select::-moz-focus-inner {
       color: transparent !important;
       text-shadow: 0 0 0 #000 !important;
       background-image: none !important;
       border:0;
    }
}

Będzie to dotyczyło wszystkich wersji przeglądarki Firefox

@-moz-document url-prefix() { 
    select {
       color: transparent !important;
       text-shadow: 0 0 0 #000 !important;
    }
}

Możesz chcieć usunąć! Ważne, jeśli planujesz, aby konspekt pojawiał się na innych stronach w Twojej witrynie, które używają tego samego arkusza stylów.

Ogólnie rzecz biorąc, formantów formularzy nie można stylizować z taką dokładnością. Nie ma przeglądarki, o której mi wiadomo, która obsługuje rozsądny zakres właściwości we wszystkich kontrolkach. To jest powód, dla którego istnieje miliard bibliotek JavaScript, które „fałszywie” tworzą kontrolki z obrazami i innymi elementami HTML i emulują ich oryginalną funkcjonalność za pomocą kodu:

http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

...

<select onchange="this.blur();">

Jeśli tego użyjesz, ramka pozostanie, dopóki nie wybierzesz pozycji z listy.

Wypróbuj jedno z poniższych:

a:active {
 outline: none;
 -moz-outline: none;
}

a {
-moz-user-focus: none;
}

Odniesienie

Oto rozwiązanie

:focus {outline:none;}
::-moz-focus-inner {border:0;}

Usuń kontur / kropkowaną ramkę z Firefox All Selectable Tags.

Umieść ten wiersz kodu w swoim arkuszu stylów:

*:focus{outline:none !important;}   

Dodaj border-style: none do wyboru w CSS.

select {
border-style: none; }

    input[type='range']::-moz-focus-outer {
    border: 0;
    outline: none !important;
    }

działa w 100%

Spowoduje to usunięcie fokusu z selectelementu i konspektu :

$("select").click(function(){
    $(this).blur();
});

Chociaż nie jest to pozbawione wad w innych przeglądarkach. Będziesz chciał sprawdzić przeglądarkę, której używa użytkownik:

if (FIREFOX) {
    //implement the code
}