title: Determine if a Select element is dropped-down - using only CSS or SASS
body: <p>Only using CSS, is there a way to determine if a select box is dropped down or closed?</p>
  
  <p>I know that there are pseudo classes such as <code>:checked</code> and <code>:indeterminate</code>, but I haven't seen one that will work in conjunction with the <code>select</code> element the way I want.</p>
  
  <p>Here's an example of my select box - with an id of <code>"field-action"</code> :</p>
  
  <pre><code>&lt;select id="field-action" name="" class=" " data-validation-required="true"&gt;    
        &lt;option value="" selected="selected"&gt;—&lt;/option&gt;        
        &lt;option value="1" id="field-action-lock"&gt;Lock&lt;/option&gt;    
        &lt;option value="2" id="field-action-unlock"&gt;Unlock&lt;/option&gt;    
        &lt;option value="3" id="field-action-pin"&gt;Pin&lt;/option&gt;    
        &lt;option value="4" id="field-action-unpin"&gt;Unpin&lt;/option&gt;    
        &lt;option value="5" id="field-action-delete"&gt;Delete&lt;/option&gt;    
        &lt;option value="6" id="field-action-undelete"&gt;Undelete&lt;/option&gt;    
        &lt;option value="7" id="field-action-move"&gt;Move&lt;/option&gt;    
        &lt;option value="8" id="field-action-merge"&gt;Merge&lt;/option&gt;    
        &lt;option value="9" id="field-action-spam"&gt;Spam&lt;/option&gt;    
        &lt;option value="10" id="field-action-notspam"&gt;Not Spam&lt;/option&gt;    
      &lt;/select&gt;
  </code></pre>
  
  <p><strong>The goal - using pure CSS or SASS - is to determine if the select list is dropped down, and if so, give it a bottom margin of about 50px.  When the box is dropped, it overlays some content that cannot be covered under any circumstances.</strong></p>
  
  <p>Any input is appreciated - thanks!</p>