Soru Firefox'tan anahat / noktalı kenarlığı kaldırılamıyor açılır seç [aşağı]


Bu sorunun zaten bir cevabı var:

Aşağıya doğru bir tarzım var, ancak tıklandığında kenarlıktan kaldırılamıyor Firefox. Kullandım outline: none ama hala çalışmıyor. Herhangi bir fikir?

CSS:

.styled-select {
    background: lightblue;
    font-size: 20px;
    height: 50px;
    line-height: 50px;
    position: relative;
    border: 0 none !important;
    outline: 1px none !important;
}
.styled-select select {
   background: transparent;
   border: 0;
   border-radius: 0;
   height: 50px;
   line-height: 50px;
   padding-top: 0; padding-bottom: 0;
   width: 100%;
   -webkit-appearance: none;       
   text-indent: 0.01px;
   text-overflow: '';
   border: 0 none !important;
   outline: 1px none !important;
}

HTML:

<div class="styled-select">
    <select id="select">
        <option value="0">Option one</option>
        <option value="1">Another option</option>
        <option value="2">Select this</option>
        <option value="3">Something good</option>
        <option value="4">Something bad</option>
    </select>
</div>

Lütfen bunu gör jsFiddle.


44
2017-10-18 13:40


Menşei


Yazdığınız kodla ilgili sorunlara ilişkin sorular, belirli bir sorunu tanımlamalı ve bunları çoğaltmak için geçerli bir kod içermelidir - Sorunun kendisinde. - Kermit
Eserleri. Tarayıcı önbelleğini temizle. - Nitesh
Chrome'da iyi görünüyordu. Firefox, "Bunu seç" ve açılan menü arasında bir boşluk gösterdi. Kurumsal bir bilgisayardayım ve IE8 ile takıldım, bu yüzden Fiddler IE'de bile gelmedi. LOL! - Doug Dawson
Özgeçmişler @FreshPrinceOfSO, şimdi kodu ekledim. - shrewdbeans
@NathanLee, önbelleğimi temizledim ama yine de noktalı kenarlığı görüyorum - shrewdbeans


Cevaplar:


Cevabımı burada buldum: https://stackoverflow.com/a/18853002/1261316

Doğru cevap olarak ayarlanmadı, ama benim için mükemmel çalıştı:

select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
}
option:not(:checked) {
  color: black; /* prevent <option>s from becoming transparent as well */
}

114
2017-10-18 13:53



(!) bu ayrıca liste öğelerinin rengini şeffaflaştırır - Simon
tx, benim için çalışıyor (seçenekler FF 29 OSX'te görülebilir) - ptim
Grate, yapması gerekeni yapar, teşekkürler. FF ubuntu 14 lts - Dragutescu Alexandru
Bootstrap kullanıyorsanız veya girişinizde herhangi bir geçişiniz varsa, eklemeyi unutmayın. transition: color 0ms;Ya da seçim kutusuna odaklandığınız anda noktalı çizginin kaybolduğunu göreceksiniz! - Micros
@Simon: Haklısın, öyle. Bundan kaçınmanın en iyi yolunun iki ek kural kullanmak olduğunu öğrendim: option { text-shadow: none } Gölge efektini geri almak option:not(:checked) { color: #000; } - veya normal metin rengi ne olursa olsun - rengi sıfırlamak için. Kontrol edilmemişÇünkü seçili seçenek, renk ve arka planını kullanıcı aracısı stil sayfasından almalıdır. - Zilk


Bu sana yardım edecek. Stil sayfanızın üstüne yerleştirin.

/**
* Address `outline` inconsistency between Chrome and other browsers.
*/

a:focus {
    outline:0;
}

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */

a:active,
a:hover {
    outline: 0;
}

-3
2017-10-18 13:52



Ne hakkında Firefox select drop down soruda sorulan gibi? - complistic
Benim bootstrap selectpicker ile çalışır. teşekkür ederim - S.M. Nat