Adjust the tag select

[rosemadder]

Please indicate how to adjust to standard select,

<select style="border:0; width:200px; height:26px; font-size:12px;">
       <option value="n_1" selected="selected">All</option>
       <option value="n_2">X</option>
       <option value="n_3">Y</option>
       <option value="n_4">Z</option>
</select>

Who looks like: with active All, clean : That's when X-Z is chosen, so they're visible, and when All is chosen, no. Thank you.

I don't understand how to fix the idea of color in Chrome and IE8+:

<select id="s" style="border:0; background:#EEE2B1; width:200px; height:26px; font-size:12px;" onchange="fn()">
       <option value="n_1" selected="selected">All</option>
       <option value="n_2">X</option>
       <option value="n_3">Y</option>
       <option value="n_4">Z</option>
</select>
function fn() {

if (document.getElementById("s").options[document.getElementById("s").selectedIndex].value == 'n_1') {
   document.getElementById("s").options[document.getElementById("s").selectedIndex].style.color = '#EEE2B1';

} else {


}

}

[Kadir]

The colour of the element chosen is the colour of the component selected. That's why he needs to be changed, for example by making the right class.

function fn(select) {
  if (select.options[select.selectedIndex].value == 'n_1') {
    select.classList.add('all');
  } else {
    select.classList.remove('all');
  }
}

option {
  color: black;
}
select.all {
  color: transparent;
}

<select id="s" style="border:0; width:200px; height:26px; font-size:12px;" class='all' onchange="fn(this)">
  <option value="n_1" selected="selected">All</option>
  <option value="n_2">X</option>
  <option value="n_3">Y</option>
  <option value="n_4">Z</option>
</select>