3

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

我知道有诸如:checkedand之类的伪类:indeterminate，但是我还没有看到可以select按照我想要的方式与元素一起工作的伪类。

这是我的选择框的示例- id 为"field-action"：

<select id="field-action" name="" class=" " data-validation-required="true">    
      <option value="" selected="selected">—&lt;/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 的底部边距。当盒子被丢弃时，它会覆盖一些在任何情况下都无法覆盖的内容。

任何意见表示赞赏 - 谢谢！

4

3 回答 3

2

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

于 2013-07-18T18:02:27.947 回答
2

尽管这似乎是通过 CSS 操作选择框的唯一方法，但它是不可接受的，因为在选择框内切换会触发焦点，但会打开选择框。用户必须单击才能打开它。

为什么不:focus呢？

select:focus {
}

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

于 2013-07-18T18:05:36.743 回答
1

可能有另一种显示选项的方式。而不是下拉列表，您可以使用这个 jsfiddle http://jsfiddle.net/cSSjF/中的选择列表，在这个答案中链接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>

这仍然只允许选择一个选项，并允许您控制要显示的选项数量。我假设您可以显示足够的选项，以免您的重要内容被推离可视区域。

于 2013-07-18T18:01:47.120 回答