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

Question

仅使用CSS，是否有办法确定选择框是否已下拉或关闭？

我知道有:checked和:indeterminate之类的伪类，但我没有看到一个与select元素一起工作的方法。< / p>

以下是我的选择框示例 - 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 - 是确定选择列表是否被删除，如果是，请给它一个约50px的底部边距。当该框被删除时，它会覆盖一些在任何情况下都无法覆盖的内容。

感谢任何意见 - 谢谢！

Answer 1

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

Answer 2

虽然这似乎是通过CSS操纵选择框的唯一方法，但是不可接受，因为选择框中的标签会触发焦点，但会打开选择框。用户必须单击才能打开它。

为什么不:focus？

select:focus {
}

小提琴：http://jsfiddle.net/ewqSA/

Answer 3

可能有另一种方式来显示您的选择。您可以使用此回答http://jsfiddle.net/cSSjF/中链接的此jsfiddle https://stackoverflow.com/a/8788381/1804496中的选择列表而不是下拉列表

<select size="5">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
    <option>11</option>
    <option>12</option>
</select>

这仍然只允许选择一个选项，并允许您控制希望显示的选项数。我假设你可以展示足够的选项，使你的重要内容不会被推到可视区域。