How override default styles for a select element multiple
<p>For a select element multiple I want to remove the background color of the selected option as I'm indicating the selection with the box before each option.
The intention is give a checkbox style to a select multiple element.</p>

<p>Why using a select multiple? 
I'm working in a Angular App and should be useful style a select multiple as a collection of checkboxes. Doing that I will be able to use angular validations, ng-options, etc. I can build the same interface with inputs type checkbox but that imply a lot more of code for the same piece of functionality.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.form-group{
  margin: 10px 0 0 20px;
}
select[multiple]{
 -webkit-appearance: none;
 -moz-appearance: none;
 appearance: none;
   border: none;
 overflow: hidden;
 box-shadow: none;
}
select[multiple].form-control{
  padding: 6px 0 6px 6px;
}

select[multiple] option{
  padding: 5px 0 7px 0;
}

select[multiple]:focus{
  box-shadow: none;
}

select[multiple]:focus option:checked{
  background-color: white;
}

select[multiple] option:before, 
select[multiple] option:after{
  content: "";
  display: inline-block;
  position: absolute;
  width: 17px;
  height: 17px;
  left: 0;
  margin-left: 12px;
  border: 1px solid #ccc;
  border-radius: 3px;
  background-color: #fff;
}
select[multiple]:focus option:checked:before{
  background: white;
}
select[multiple] option:checked:before{
  background-color: #319DB5;
  border-color: #2c8ca1;
}
select[multiple] option:checked:after{
  background-color: gray;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/&gt;
&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/&gt;

&lt;body&gt;
  &lt;div class="container"&gt;
    &lt;div class="form-group"&gt;
      &lt;label for="someOptions"&gt;Select multiple&lt;/label&gt;
      &lt;select multiple="multiple" class="form-control" size="10" name="options" required="required" id="someOptions"&gt;
        &lt;option label="Option 1" value="number:1"&gt;Option 1&lt;/option&gt;
        &lt;option label="Option 2" value="number:2"&gt;Option 2&lt;/option&gt;
      &lt;/select&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/body&gt;</code></pre>
</div>
</div>
</p>