css - 确定 Select 元素是否下拉 - 仅使用 CSS 或 SASS

Question

仅使用 CSS，有没有办法确定选择框是下拉还是关闭？

我知道有伪类，例如 :checked 和 :indeterminate，但我还没有看到可以与 select 结合使用的伪类 以我想要的方式添加元素。

这是我的选择框的示例 - id 为 "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>

目标 - 使用纯 CSS 或 SASS - 是确定选择列表是否下拉，如果是，则给它一个大约 50 像素的底部边距。当盒子掉落时，它会覆盖一些在任何情况下都无法覆盖的内容。

欢迎任何意见 - 谢谢!

Answer 1

SELECT 元素不使用 HTML 呈现，它们是浏览器/操作系统的一部分。打开时，它们不占用 DOM 内的任何空间，因此 CSS 无法检测到这一点。