web-dev-qa-db-fra.com

Impossible de supprimer le contour / la bordure en pointillés de la liste déroulante de sélection de Firefox

J'ai un style vers le bas, mais je ne peux pas supprimer la bordure en pointillés lorsqu'elle est cliquée dans Firefox . J'ai utilisé outline: none mais ça ne marche toujours pas. Des idées?

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>

Veuillez voir ceci jsFiddle .

htmlcssforms
52
shrewdbeans

Trouvé ma réponse ici: https://stackoverflow.com/a/18853002/1261316

Ce n'était pas la bonne réponse, mais cela a parfaitement fonctionné pour moi:

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

Cela vous aidera. Placez-le sur votre feuille de style.

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