How to remove internal dashes from a <SELECT> in Firefox

Question

Once again I just realized that Firefox is putting "additional stylings" in my inputs.

This time, in the <select>, when I click on it to select an option, there is always an internal dashed:

This is something that happens specifically in Firefox. There are ways to remove these little dashes that are appearing when I select <select>?

Answer 1

In Windows this does not occur, at least not in Firefox, I am almost certain that this is a situation that occurs on Ubuntu or in the specific graphical environment, because the controls rendered in the browser are "partially" generated from the "operating system" which probably will not allow a total customization.

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

.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: In Windows the only time that was shown the dotted was when I used the Tab to navigate

---

Techniques to remove "Outline" in Firefox

Note: It is very likely that these techniques work better when applied to links like: <a href="...">foo bar</a>

You can experience 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>

---

Or the selector -moz-focus-inner, this was what worked best, at least with navigation via Tab had the desired effect, however Debian with Lxde did not work:

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>

---

Concluding

In other words, I do not believe that there is no guaranteed technique, because it depends on the operating system, same techniques as moz-focusring may not achieve the desired result or cause another effect on different operating systems, as it is not possible to customize completely.

Take into account that this stippling can even help the user and does not bother so much.

Answer 2

That one style can solve some default behaviors:

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

No OS happened the same problem, nor Firefox.

Answer 3

There is already 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 when adding any style of borda and background about a select, the internal stippling appears at the time of the focus.

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

2 - No '.form-control-moz' the stippling went to the tips.

3 - And in others where there is modification of the property background and border there’s the stippling in the middle.

That’s because inside of background-color there is a style of firefox -moz-Combobox and also a style called '-moz-appearance: menulist', which, the conclusion I reached was that these two styles are responsible for generating this dashed.

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

Test environment:

Ubuntu 16.04 
Firefox Quantun.