Cannot remove outline/dotted border from Firefox select drop down [duplicate]

Question

I have a styled down down, but I cannot remove the dotted border when it is clicked in Firefox. I've used outline: none but it still doesn't work. Any ideas?

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> 

Please see this jsFiddle.

Answer 1

Found my answer here: https://stackoverflow.com/a/18853002/1261316

It wasn't set as the correct answer, but it worked perfectly for me:

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