How to remove internal traces of a SELECT in Firefox

On Windows this does not occur, at least not in Firefox, I'm almost sure that this is a situation in Ubuntu in the specific graphic environment , since the rendered controls in the browser are "partially" generated from the "operating system" which probably will not allow full customization.

As an example of the other question in Windows, to test click:

.form-control
{
    background-color: #fff;
    border-radius: 15px;
    border: 2px solid #ccc;
    font-size: 16px;
    margin-top: 5px;
    min-height: 57px;
    outline: none;
    padding: 15px 10px;
    transition: border-color .1s linear;
    width: 100%;
    box-sizing: border-box;
 }

 select.form-control {
    -webkit-appearance: none;
    -moz-appearance: none;
         appearance: none; /*provavelmente será implementado no futuro*/

    background: url(data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMzA2cHgiIGhlaWdodD0iMzA2cHgiIHZpZXdCb3g9IjAgMCAzMDYgMzA2IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAzMDYgMzA2OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PGc+PHBvbHlnb24gcG9pbnRzPSIyNzAuMyw1OC42NSAxNTMsMTc1Ljk1IDM1LjcsNTguNjUgMCw5NC4zNSAxNTMsMjQ3LjM1IDMwNiw5NC4zNSIvPjwvZz48L3N2Zz4=) center right no-repeat;

   background-size: 8px 8px;
}

<select class="form-control">
<option>Selecione...</option>
<option>Masculino</option>
<option>Feminino</option>
</select>

The result in Firefox on Windows was:

  

Note:InWindowstheonlytimetheditheringwasshownwaswhenIusedTabtonavigate

TechniquestoremoveoutlineinFirefox

  

Note:Thesetechniquesarelikelytoworkbetterwhenappliedtolinkslike:<ahref="...">foo bar</a>

You can try the:

select.form-control, select.form-control:focus {
    outline: 0;
}

Click below to test:

select.form-control
{
    background-color: #fff;
    border: 2px solid #ccc;
    padding: 15px 10px;
    width: 100%;
}

select.form-control, select.form-control:focus {
    outline: 0;
}

<select class="form-control">
<option>Selecione...</option>
<option>Masculino</option>
<option>Feminino</option>
</select>

Or moz-focusring with "some" effect:

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

Click below to test:

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

select.form-control
{
    background-color: #fff;
    border: 2px solid #ccc;
    padding: 15px 10px;
    width: 100%;
}

<select class="form-control">
<option>Selecione...</option>
<option>Masculino</option>
<option>Feminino</option>
</select>

select.form-control::-moz-focus-inner {
    border: 0;
}

Click below to test:

select.form-control::-moz-focus-inner {
    border: 0;
}

select.form-control
{
    background-color: #fff;
    border: 2px solid #ccc;
    padding: 15px 10px;
    width: 100%;
}

<select class="form-control">
<option>Selecione...</option>
<option>Masculino</option>
<option>Feminino</option>
</select>

Completing

In other words, I do not believe that there is no guaranteed technique, because it depends on the operating system , even techniques such as -moz-focus-inner may not reach the desired result or cause another effect on different operating systems. you can not completely customize it.

Take into consideration that this dither can even help the user and does not bother you as much.

This style can solve some of the standard behaviors:

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

In the OS there was not the same problem, neither in Firefox.

There is an answer saying something similar, but complementing:

.form-control-border {
  display: block;
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857;
  color: #555555;
  border-color: #fff;
    }
.form-control-bg {
  display: block;
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857;
  color: #555555;
  background-color: #fff;
    }
.form-control-moz {
 
  display: block;
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  
  font-size: 14px;
  line-height: 1.42857;
  color: #555555;
  
  background-color: -moz-Combobox;
  color: -moz-ComboboxText;
  padding: 0;
  -moz-appearance: menulist;
}
.form-control-n{
  display: block;
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  
  font-size: 14px;
  line-height: 1.42857;
  color: #555555;
}

<select class='form-control-border'>
  <option>a</option>
  <option>b</option>
  <option>c</option>
</select>

<select class='form-control-bg'>
 <option>a</option>
  <option>b</option>
  <option>c</option>
</select>

<select class='form-control-moz'>
 <option>a</option>
  <option>b</option>
  <option>c</option>
</select>

<select class='form-control-n'>
  <option>a</option>
  <option>b</option>
  <option>c</option>
</select>

Note that by adding any style of borda and background to select , the inner dither appears at focus .

1 - See that in the select of classname '.form-control-n' there is no border dotted in focus.

2 - In% with dotted line went to the tips.

3 - And in others where there is modification of the property '.form-control-moz' and background ha the dotted in the middle.

This is because within border there is a style of firefox background-color and also a style called -moz-Combobox , which, the conclusion I got was that these two styles are responsible for generating this dash.

I could not overlap these styles in any way, if I can update the answer.

Test environment:

Ubuntu 16.04 
Firefox Quantun.