title: Control open/close of <select> with JQuery
body: <p>I'm creating a custom HTML5 <code>&lt;select&gt;</code> menu. By design, I'm trying to change the color of the <code>select</code> elements depending on the selected element. Basically I need <code>#555555</code> color when the menu is opened and when the element selected is not the first one, and #c7cacb for closed menu with the first element selected. </p>
  
  <p>The problem comes when the user opens the menu, selects the first option, and then opens the menu once again: all elements are #c7cacb. It would be easy to control color if I got the menu open|close status with jQuery (I didn't find the way how) or other way (stack here). How can I do this?</p>
  
  <p>This is my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function(){
    // wrap all selectors to add ::after in css
    $('select:not([disabled])').wrap('&lt;label class="dropdown"&gt;');
    $('select[disabled]').wrap('&lt;label class="dropdownDisabled"&gt;');
    // controlling color of elements
    $('select').click(function(){
      var thisDropdown= $(this);
      if($(thisDropdown).prop('selectedIndex') == 0){
        thisDropdown.css('color', '#555555');
        thisDropdown.click( function(){ 
          if($(thisDropdown).prop('selectedIndex') == 0) {
            thisDropdown.css('color', '#c7cacb');
          }
        });
      }
    });
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/*dropdown styling*/
  select {
    width: 230px;
    height: 46px;
    background: #f1f5f8;
    color:#c7cacb;
    font-size: 16pt;
    padding: 3px;
    border: 2px solid #d7d6d5;
    border-radius: 8px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }
  select::-ms-expand {/*removing dropdown arrow for IE*/
    display: none;
  }
  .dropdownlabel {display: block; font-size: 16pt; margin-bottom: 10px; color: #d7d6d5}
  label.dropdown::after {/*adding custom arrow*/
      content: "\e90e";
      font-family: 'icomoon';
      font-size: 8pt;
      color: #555555;
   display:inline-block;
   box-sizing:border-box;
      margin-left: -32px;
      pointer-events :none; /* let the click pass trough */
  }
  
  select[disabled] {
   color: #c7cacb;
   border: 2px solid #e4e5e6;
  }
  
  label.dropdownDisabled::after {
      content: "\e90e";
      font-family: 'icomoon';
      font-size: 8pt;
      color: #d3d5d7;
   display:inline-block;
   box-sizing:border-box;
      margin-left: -32px;
      pointer-events :none; /* let the click pass trough */
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;label for="selected" class="dropdownlabel"&gt;Dropdown label&lt;/label&gt;
  &lt;select name="selected"&gt;
    &lt;option value="s"&gt;None Selected&lt;/option&gt;
    &lt;option value="s2"&gt;Selected&lt;/option&gt;
    &lt;option value="s3"&gt;Another value&lt;/option&gt;
  &lt;/select&gt;</code></pre>
  </div>
  </div>
  </p>