<select> 元素上的“向下箭头”的 CSS？答案

【问题标题】：CSS for the "down arrow" on a <select> element?<select> 元素上的“向下箭头”的 CSS？
【发布时间】：2010-10-02 07:12:39
【问题描述】：

是否可以对下拉选择元素上的向下箭头进行样式化？即，（<select><option>--></option></select>）

我怀疑答案是否定的，因为 IE 处理该特定元素的方式。如果没有办法，有没有人知道使用 javaScript 的“假”下拉框可以模仿这种行为但让我能够自定义？

【问题讨论】：

标签： jquery html css

【解决方案1】：

http://jsfiddle.net/u3cybk2q/2/ 检查 windows、iOS 和 Android（iexplorer 补丁）

.styled-select select {
   background: transparent;
   width: 240px;
   padding: 5px;
   font-size: 16px;
   line-height: 1;
   border: 0;
   border-radius: 0;
   height: 34px;
   -webkit-appearance: none;
}
.styled-select {
   width: 240px;
   height: 34px;
   overflow: visible;
   background: url(http://nightly.enyojs.com/latest/lib/moonstone/dist/moonstone/images/caret-black-small-down-icon.png) no-repeat right #FFF;
   border: 1px solid #ccc;
}
.styled-select select::-ms-expand {
    display: none; /*patch iexplorer*/
}

  <div class="styled-select">
       <select>
          <option>Here is the first option</option>
          <option>The second option</option>
       </select>
    </div>

【讨论】：

【解决方案2】：

您可以仅使用 CSS 和向下箭头作为绝对定位的图像来实现这一点，并使用“pointer-events: none;”请参阅下面的示例：

<select>
  <option value="1">1 Person</option>
  <option value="2">2 People</option>
</select>
<img class="passthrough" src="downarrow.png" />

.passthrough {
    pointer-events: none;
    position: absolute;
    right: 0;
}

【讨论】：

【解决方案3】：

也许你可以使用jQuery selectbox replacement。这是一个 jQuery 插件。

【讨论】：

非常适合我 :) 我认为没有更好的解决方案，因为 IE 和 CSS hacking 存在很多问题......我在这里唯一缺少的是回退到如果 JS 在浏览器中被禁用，则某种 css。
如果 css 被禁用，您的用户应该得到他们所得到的。

【解决方案4】：

这里有一个很酷的 CSS 解决方案来设置样式下拉列表：http://bavotasan.com/2011/style-select-box-using-only-css/

基本上，将选择包装在容器 div 中，将选择设置为比具有透明背景的容器宽 18 像素，将溢出：隐藏到容器（以切断浏览器生成的箭头），并添加背景带有风格化箭头的图像指向容器。

在 IE7（或 6）中不起作用，但说真的，我说如果您使用的是 IE7，那么您应该获得不那么漂亮的下拉体验。

【讨论】：

我用它来渲染移动网站的选择标签...我没有使用 javascript 来保持默认的操作系统行为弹出对话框...渲染 okey [iphone;android 3/4] dev still正在进行中

【解决方案5】：

这会将输入、选择等更改为旧样式的灰色，不确定之后是否可以操作：在<head> 输入：

<meta http-equiv="MSThemeCompatible" content="NO">

【讨论】：

【解决方案6】：

试试这个

   <div style='position:relative;left:0px;top:0px;
        onMouseOver=document.getElementById('visible').style.visibility='visible' 
        id='hidden'>10
   <select style='position:absolute;left:0px;top:0px;cursor:pointer;visibility:hidden;'
        onMouseOut=document.getElementById('visible').style.visibility='hidden'
        onChange='this.form.submit()' 
        id='visible' multiple size='3'>";
   <option selected value=10>10</option>
   <option value=20>20</option>
   <option value=50>50</option>
   </select>
   </div>

【讨论】：

【解决方案7】：

不，向下箭头是浏览器元素。它在每个浏览器中都内置[并且不同]。但是，您可以使用 javascript 将选择框替换为自定义下拉框。

Jan Hancic 提到了一个 jQuery 插件来做到这一点。

【讨论】：

【解决方案8】：

使用 CSS 无法很好地设置组合样式。

FogBugz 的人使用 JavaScript 制作了一个非常好的自定义组合，所以这是可能的，只是需要做很多工作才能让它正确。

最好坚持版本 1 的标准版本，然后在您的应用发布后看看是否值得更新。

【讨论】：

【解决方案9】：

您需要使用隐藏的 div 和隐藏的输入元素创建自己的下拉菜单，以记录“选择”了哪个选项。我的猜测是他发布的@Jan Hancic 的链接可能就是你要找的。

【讨论】：

【解决方案10】：

我不知道它是否可以用 CSS 设置样式（可能在 IE 中不行），但是请：不要使用使用 javascript 的“假”下拉框，因为这些东西的可用性通常很糟糕。除其他外，通常不存在键盘导航。

【讨论】：

【解决方案11】：

下拉是平台级元素，不能应用CSS。

您可以使用 CSS 在其上方叠加图像，并在下方元素中调用 click 事件。

【讨论】：