FF'de seçim kutusundan dış çizgiyi kaldır

Seçili bir öğede seçilen bir öğeyi çevreleyen noktalı çizgiyi kaldırmak mümkün müdür?

outlineÖzelliği CSS'ye eklemeyi denedim ama işe yaramadı, en azından FF'de değil.

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

Güncelle
Devam etmeden ve ana hatları kaldırmadan önce lütfen bunu okuyun.
http://www.outlinenone.com/

Bir çözüm buldum, ancak tüm hacklerin anası, umarım diğer daha sağlam çözümler için bir başlangıç ​​noktası görevi görür. Dezavantajı (bence çok büyük), Modernizr gibi bir kitaplık (test edilmemiş, sadece bir teori) kullanmadığınız sürece (IE 9) desteklemeyen text-shadowancak destekleyen herhangi bir tarayıcının rgbametni oluşturmamasıdır.

Firefox, noktalı kenarlığın rengini belirlemek için metin rengini kullanır. Öyleyse söyle eğer yaparsan ...

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

Firefox, noktalı kenarlığı şeffaf hale getirecektir. Ama elbette metniniz de şeffaf olacak! Yani metni bir şekilde görüntülemeliyiz. text-shadowkurtarmaya geliyor:

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

Metnin yerini alacak şekilde ofseti ve bulanıklığı olmayan bir metin gölgesi koyarız. Elbette eski tarayıcı bunlardan hiçbir şey anlamıyor, bu nedenle renk için bir yedek sağlamalıyız:

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

Bu, IE9'un devreye girdiği zamandır: rgbametin gölgesini destekler ancak desteklemez , böylece görünüşte boş bir seçim kutusu alırsınız. text-shadowAlgılama özellikli Modernizr sürümünüzü alın ve yapın ...

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

Zevk almak.

Eh, Duopixel cevabı sade mükemmeldir. Bir adım daha ileri gidersek, onu kurşun geçirmez hale getirebiliriz.

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

İşte gidiyorsunuz, sadece Firefox için geçerli ve seçilen seçeneğin etrafındaki çirkin noktalı çerçeve kayboldu.

Burada, Firefox seçim kutuları ile ilgili stil sorunlarını gidermek için bir çözüm işbirliği bulunmaktadır. Bu CSS seçiciyi, normal CSS sıfırlamanızın bir parçası olarak kullanın.

Sınıf, soruya göre anahatları kaldırır, ancak arka plan resmini de kaldırır (çünkü genellikle özel bir açılır ok kullanıyorum ve Firefox'un sistem açılır oku şu anda kaldırılamıyor). Açılır resim dışında herhangi bir şey için arka plan resmi kullanıyorsanız, sadece satırı kaldırınbackground-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;
    }
}

Bu, tüm firefox sürümlerini hedefleyecek

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

Ana hattın sitenizdeki aynı stil sayfasını kullanan diğer sayfalarda görünmesini planlıyorsanız,! Önemli öğesini kaldırmak isteyebilirsiniz.

Genel olarak, form kontrollerinin bu doğruluk derecesine göre şekillendirilmesi imkansızdır. Tüm kontrollerde makul bir özellik aralığını destekleyen bildiğim hiçbir tarayıcı yok. Görüntüler ve diğer HTML öğeleriyle "sahte" denetim oluşturan ve orijinal işlevlerini kodla taklit eden çok sayıda JavaScript kitaplığının olmasının nedeni budur:

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

...

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

Bunu kullanırsanız, listeden bir öğe seçene kadar kenarlık kalır.

Şunlardan birini deneyin:

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

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

Referans

İşte çözüm geliyor

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

Firefox Tüm Seçilebilir Etiketlerden anahat / noktalı kenarlığı kaldırın.

Bu kod satırını stil sayfanıza yerleştirin:

*:focus{outline:none !important;}   

Kenarlık stili ekleyin : CSS'de seçiminize hiçbiri .

select {
border-style: none; }

Adım 1) HTML Ekleyin: İstediğiniz belirli seçenekleri ekleyin ve şu özelliği ekleyin: contenteditable = "true"

Adım 2) CSS Ekleyin: Keyifli tüm öğeleri seçmek için [öznitelik] seçiciyi kullanın ve anahat özelliği ile sınırı kaldırın:

[contenteditable] {
  outline: 0px solid transparent;
}
select {
  border: none;
}

<select contenteditable="true">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

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

% 100 çalışıyor

Bu, odağı selectöğeden ve ana hattan kaldırır :

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

Yine de, diğer tarayıcılarda eksiklikleri yok. Kullanıcının kullandığı tarayıcıyı kontrol etmek isteyeceksiniz:

if (FIREFOX) {
    //implement the code
}