Hapus garis dari kotak pilih di FF

Apakah mungkin untuk menghapus garis putus-putus yang mengelilingi item yang dipilih dalam elemen pemilihan?

Saya telah mencoba menambahkan outlineproperti di CSS tetapi tidak berhasil, setidaknya tidak di FF.

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

Perbarui
Sebelum Anda melanjutkan dan menghapus garis besarnya, harap baca ini.
http://www.outlinenone.com/

Saya menemukan solusi, tetapi ini adalah induk dari semua peretasan, semoga ini akan berfungsi sebagai titik awal untuk solusi lain yang lebih kuat. Kelemahannya (menurut saya terlalu besar) adalah bahwa browser apa pun yang tidak mendukung text-shadowtetapi mendukung rgba(IE 9) tidak akan membuat teks kecuali Anda menggunakan perpustakaan seperti Modernizr (tidak diuji, hanya teori).

Firefox menggunakan warna teks untuk menentukan warna batas bertitik. Jadi katakan jika Anda melakukan ...

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

Firefox akan membuat batas putus-putus menjadi transparan. Tapi tentu saja teks Anda juga akan transparan! Jadi kita harus menampilkan teks tersebut. text-shadowdatang untuk menyelamatkan:

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

Kami menempatkan bayangan teks tanpa offset dan tanpa blur, sehingga menggantikan teks. Tentu saja peramban lama tidak memahami apa-apa tentang ini, jadi kami harus memberikan penggantian untuk warnanya:

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

Ini adalah saat IE9 ikut bermain: ia mendukung rgbatetapi tidak mendukung bayangan teks, jadi Anda akan mendapatkan kotak pilih yang tampaknya kosong. Dapatkan versi Modernizr Anda dengan text-shadowdeteksi dan lakukan ...

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

Nikmati.

Nah, jawaban Duopixel sangat sempurna. Jika kita melangkah lebih jauh, kita bisa membuatnya anti peluru.

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

Ini dia, hanya berlaku untuk Firefox dan garis bertitik jelek di sekitar opsi yang dipilih hilang.

Berikut adalah solusi kolaborasi untuk memperbaiki masalah gaya dengan kotak pilih Firefox. Gunakan pemilih CSS ini sebagai bagian dari penyetelan ulang CSS biasa Anda.

Kelas menghapus garis sesuai pertanyaan tetapi juga menghapus gambar latar belakang (karena saya biasanya menggunakan panah dropdown kustom dan panah dropdown sistem Firefox saat ini tidak dapat dihapus). Jika menggunakan gambar latar belakang untuk apa pun selain gambar dropdown, cukup hapus garisbackground-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;
    }
}

Ini akan menargetkan semua versi firefox

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

Anda mungkin ingin menghapus! Penting, jika Anda berencana untuk membuat kerangka muncul di laman lain di situs Anda yang menggunakan lembar gaya yang sama.

Secara umum, kontrol bentuk tidak mungkin diatur sedemikian rupa hingga tingkat akurasi tersebut. Tidak ada browser yang saya ketahui mendukung berbagai properti yang masuk akal di semua kontrol. Itulah alasan mengapa ada triliunan pustaka JavaScript yang "memalsukan" kontrol bentuk dengan gambar dan elemen HTML lainnya serta meniru fungsi aslinya dengan kode:

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

...

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

Jika Anda menggunakan ini, perbatasan tetap sampai Anda memilih item dari daftar.

Cobalah salah satu dari ini:

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

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

Referensi

Inilah solusinya

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

Hapus garis batas / garis putus-putus dari Firefox Semua Tag yang Dapat Dipilih.

Letakkan baris kode ini di lembar gaya Anda:

*:focus{outline:none !important;}   

Tambahkan gaya batas: tidak ada yang Anda pilih di CSS.

select {
border-style: none; }

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

bekerja 100%

Ini akan menghilangkan fokus dari selectelemen dan garis luar :

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

Padahal ini bukan tanpa kekurangan di browser lain. Anda sebaiknya memeriksa browser yang digunakan pengguna:

if (FIREFOX) {
    //implement the code
}