Видаліть контур із поля для вибору в FF

Чи можна видалити пунктирну лінію, що оточує вибраний елемент у виділеному елементі?

Я намагався додати outlineвластивість у CSS, але це не спрацювало, принаймні не в FF.

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

Оновлення
Перш ніж продовжувати видаляти контур, прочитайте це.
http://www.outlinenone.com/

Я знайшов рішення, але це мати всіх хаків, сподіваємось, воно послужить відправною точкою для інших більш надійних рішень. Недоліком (занадто великим, на мій погляд) є те, що будь-який браузер, який не підтримує, text-shadowале підтримує rgba(IE 9), не відображатиме текст, якщо ви не використовуєте бібліотеку, таку як Modernizr (не перевірено, лише теорія).

Firefox використовує колір тексту для визначення кольору пунктирної межі. Так скажіть, якщо ви робите ...

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

Firefox зробить пунктирну межу прозорою. Але звичайно ваш текст теж буде прозорим! Тому ми повинні якось відображати текст. text-shadowна допомогу приходить:

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

Ми ставимо тінь тексту без зміщення та розмиття, щоб вона замінила текст. Звичайно, старіший браузер нічого з цього не розуміє, тому ми повинні надати запасний варіант для кольору:

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

Це коли IE9 вступає в гру: він підтримує, rgbaале не text-shadow, тому ви отримаєте, мабуть, порожнє поле вибору. Отримайте свою версію Modernizr із text-shadowвиявленням і зробіть ...

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

Насолоджуйтесь.

Що ж, відповідь Duopixel цілком досконала. Якщо ми підемо на крок далі, ми можемо зробити це куленепробивним.

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

Ось, дійсний лише для Firefox, і некрасивий пунктирний контур навколо вибраної опції зник.

Ось співпраця рішень для виправлення проблем зі стилем за допомогою вікон для вибору Firefox. Використовуйте цей селектор CSS як частину вашого звичайного скидання CSS.

Клас видаляє контур відповідно до запитання, а також видаляє будь-яке фонове зображення (оскільки я зазвичай використовую спеціальну стрілку спадного меню, а стрілку спадного меню системи Firefoxes наразі не можна видалити). Якщо ви використовуєте фонове зображення для будь-чого іншого, крім випадаючого, просто видаліть рядок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;
    }
}

Це буде націлено на всі версії Firefox

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

Можливо, ви захочете видалити!! Важливо, якщо ви плануєте, щоб контур відображався на інших сторінках вашого сайту, які використовують ту саму таблицю стилів.

Загалом елементи керування формою неможливо стилізувати з такою мірою точності. Я не знаю жодного браузера, який підтримує розумний діапазон властивостей у всіх елементах управління. Ось чому існує мільйон бібліотек JavaScript, які "підробляють" елементи керування формою із зображеннями та іншими елементами HTML і імітують їх початкову функціональність за допомогою коду:

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

...

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

Якщо ви використовуєте це, межа залишається, доки ви не вибрали елемент зі списку.

Спробуйте один із таких:

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

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

Довідково

Ось рішення

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

Видаліть контур / пунктирну межу з усіх тегів Firefox.

Помістіть цей рядок коду у таблицю стилів:

*:focus{outline:none !important;}   

Додайте стиль кордону: жоден до вашого виділення в CSS.

select {
border-style: none; }

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

працює на 100%

Це видалить фокус з selectелемента та контуру :

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

Хоча це не позбавлено недоліків інших браузерів. Ви захочете перевірити браузер, яким користується користувач:

if (FIREFOX) {
    //implement the code
}