Usunąć kontur z pola wyboru w FF

Question

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

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

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

Aktualizacja
Zanim pójdziesz do przodu i usunąć kontur, proszę przeczytać.
http://www.outlinenone.com/

Answer 1

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

Firefox używa koloru tekstu do określenia koloru przerywanej granicy. Powiedzmy, że ...

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

Firefox spowoduje, że przerywana ramka stanie się przezroczysta. Ale oczywiście twój tekst również będzie przezroczysty! Musimy więc jakoś wyświetlić tekst. text-shadow przychodzi na ratunek:

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

Kładziemy cień tekstu bez offsetu i bez rozmycia, dzięki czemu zastępuje tekst. Oczywiście starsza przeglądarka nie rozumiem nic z tego, więc musimy zapewnić zabezpieczenie dla koloru:

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

To kiedy IE9 wchodzi w grę: obsługuje rgba ale nie text-shadow, więc dostaniesz pozornie puste pole wyboru. Pobierz wersję modernizr z text-shadow wykrywania i zrobić ...

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

Enjoy.

Answer 2

Ogólnie rzecz biorąc, formanty kontrolne są niemożliwe do stylu do tego stopnia dokładności. Nie ma przeglądarki, o której wiem, że obsługuje rozsądny zakres właściwości we wszystkich kontrolkach. To jest powód, dlaczego nie jesteś gazillion JavaScript bibliotek „fałszywe” formantów formularza z obrazów i innych elementów HTML i naśladować ich pierwotnej funkcji z kodu:

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

...

Answer 3

Wypróbuj jedną z te:

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

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

Reference

Answer 4

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

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

Answer 5

Cóż, Duopixel’s answer jest prosty. Jeśli pójdziemy o krok dalej, możemy uczynić to kuloodpornym.

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

Gotowe, ważne tylko w Firefoksie, a brzydki, kropkowany kontur wokół wybranej opcji zniknął.

Answer 6

Nadchodzi roztworowi

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

Answer 7

ten będzie skierowany wszystkich wersjach Firefoksa

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

Może chcesz usunąć! Ważne, jeśli planujesz mieć zarys pojawiają się na innych stronach w całej witryna korzystająca z tego samego arkusza stylów.

Answer 8

Oto współpraca rozwiązań do naprawy problemów związanych z stylizacją za pomocą pól wyboru Firefoksa. Użyj tego selektora CSS jako części zwykłego resetowania CSS.

Klasa usuwa obrys na pytanie, ale także usuwa obraz w tle (zwykle używam niestandardowej strzałki rozwijanej, a strzałki rozwijanej systemu Firefox nie można obecnie usunąć). W przypadku korzystania z obrazu tła do niczego innego niż rozwijanej obrazu, po prostu usunąć wiersz 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; 
    } 
} 

Answer 9

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

pracy 100%

Answer 10

Tutaj to działa!

$ ("select"). Kliknij (function() {

// usuwa punkt ciężkości z zaznaczonym elementem natychmiast

// i tak będzie zarys

$ (this) .blur();

}); 

Choć nie mają swoich niedociągnięć w innych przeglądarkach, będziemy chcieli, aby sprawdzić typ przeglądarki użytkownik jest wykorzystanie i jeśli (test jest Firefox) {//implement t on kod}

Answer 11

Usuń kontur/przerywaną ramkę z Firefoksa Wszystkie zaznaczone znaczniki.

umieścić ten wiersz kodu w arkuszu stylów:

*:focus{outline:none !important;}