title: how to change font/background colors of a selected option permanently with pure javascript
body: <p>I require the <strong>selected option's font/background colors change permanently</strong> to for example red/yellow after user completed the selection.</p>
  
  <p><strong>Constraints:</strong></p>
  
  <ul>
  <li>Code must work in IE11.</li>
  <li>No jquery. Pure js.</li>
  <li>Form has id. Selects, options do not have id.</li>
  <li>Form has tens of selects.</li>
  <li>Solution does not have to be inline js.</li>
  <li><strong>If it is a must</strong> for solution, I can add class to selects and/or options.</li>
  </ul>
  
  <p>As an example assume "health" was selected from below. So "health" should be seen red/yellow after selection completed and clicked to a space in the page</p>
  
  <p>I don't know js. I tried as below and did not work in ie11. Browser js is enabled. I couldn't find an existing Q/A proper for me.</p>
  
  <pre><code>&lt;form id="myform" name="myform" method="post" accept-charset="utf-8"&gt;
      &lt;select name="select1" onchange="this.options[this.selectedIndex].style.color='red'"&gt;
          &lt;option value="0"&gt;Select&lt;/option&gt;
          &lt;option style="color:#333;" value="1"&gt;Health&lt;/option&gt;
          &lt;option value="2"&gt;Wisdom&lt;/option&gt;
  &lt;/form&gt;
  </code></pre>
  
  <ul>
  <li>why my trial did not work?</li>
  <li>how to make it work while satisfying my constraints?</li>
  </ul>
  
  <p>here is the jsbin link: <a href="https://jsbin.com/hubigarofa/1/edit?html,output" rel="nofollow noreferrer">https://jsbin.com/hubigarofa/1/edit?html,output</a></p>
  
  <p>thanks, regards</p>