फ़ायरफ़ॉक्स से रूपरेखा/बिंदीदार सीमा को हटा नहीं सकता

Question

ड्रॉप डाउन डाउन डाउन है, लेकिन मैंने फ़ायरफ़ॉक्स पर क्लिक किए जाने पर बिंदीदार सीमा को हटा नहीं सकता है। मैंने outline: none का उपयोग किया है लेकिन यह अभी भी काम नहीं करता है। कोई विचार?

सीएसएस:

.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> 

कृपया इस jsFiddle देखते हैं।

Answer 1

मिले मेरी यहाँ जवाब: https://stackoverflow.com/a/18853002/1261316

यह सही जवाब के रूप में स्थापित नहीं किया गया था, लेकिन यह मेरे लिए पूरी तरह से काम किया:

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

Answer 2

यह आपकी मदद करेगा। इसे अपनी स्टाइल शीट के शीर्ष पर रखें।

/** 
* 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; 
} 

Answer 3

यह फ़ायरफ़ॉक्स 42.0 पर काम करता है:

a:link { 
    outline: 0; 
}