Determine if a Select element is dropped-down - using only CSS or SASS

Question

Only using CSS, is there a way to determine if a select box is dropped down or closed?

I know that there are pseudo classes such as :checked and :indeterminate, but I haven't seen one that will work in conjunction with the select element the way I want.

Here's an example of my select box - with an id of "field-action" :

<select id="field-action" name="" class=" " data-validation-required="true">    
      <option value="" selected="selected">—</option>        
      <option value="1" id="field-action-lock">Lock</option>    
      <option value="2" id="field-action-unlock">Unlock</option>    
      <option value="3" id="field-action-pin">Pin</option>    
      <option value="4" id="field-action-unpin">Unpin</option>    
      <option value="5" id="field-action-delete">Delete</option>    
      <option value="6" id="field-action-undelete">Undelete</option>    
      <option value="7" id="field-action-move">Move</option>    
      <option value="8" id="field-action-merge">Merge</option>    
      <option value="9" id="field-action-spam">Spam</option>    
      <option value="10" id="field-action-notspam">Not Spam</option>    
    </select>

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.

Any input is appreciated - thanks!

Answer 1

SELECT elements are not rendered using HTML, they are part of the browser/operating system. When opened they do not take up any space within the DOM, therefore CSS cannot detect this.