jQuery addClass example

Change class name on click in jQuery

by Kolichikov

HTML

<h1>Custom &lt;select&gt; styling</h1>
<p>Works in Chrome, Safari, Firefox and IE10+. For IE8 & 9, we cannot remove the default dropdown arrow, so instead we remove our image replacement.</p>
<select>
  <option>Foo</option>
  <option>Bar</option>
</select>
<h3>References</h3>
<ul>
<li><a href="http://stackoverflow.com/questions/6787667">Stackoverflow: What is the correct “-moz-appearance” value to hide dropdown arrow of a select element</a></li>
<li><a href="http://wisercoder.com/how-to-remove-the-dropdown-arrow-in-internet-explorer/">How to remove the dropdown arrow in Internet Explorer</a></li>
<li><a href="http://uplifted.net/programming/change-default-select-dropdown-style-just-css/">How to Change the Default Select Drop-Down List with CSS</a></li>
</ul>

SCSS

body {
  margin: 10px;
}

select {

  
  &::-ms-expand {
    color:white;
  }
}

// codepen adds ie class for IE9- so perfect to use to remove the image replacement
body.ie select {
  background-image: none;
}