Question

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

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

Answer 1

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

基本上，将select包装在容器div中，将select的样式设置为比透明背景的容器宽18px，给溢出：隐藏到容器（切断浏览器生成的箭头），然后添加背景图像与程式化的箭头到容器。

在IE7（或6）中不起作用，但严重的是，我说如果你使用IE7，你应该得到一个不那么漂亮的下拉体验。

Answer 2

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

Answer 3

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

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

Answer 4

下拉列表是平台级元素，您无法对其应用CSS。

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

Answer 5

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

FogBugz的人使用JavaScript制作了一个相当不错的自定义组合，所以有可能，只需要做很多工作就可以了。

最好坚持使用版本1的标准版本，然后看看一旦你的应用程序在野外，是否值得更新它。

Answer 6

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

Answer 7

你可以用CSS和你的向下箭头作为一个绝对的图像来实现这个目标 - 指针 - 事件：无;＆＃34;请参阅下面的示例：

<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;
}

Answer 8

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

Answer 9

试试这个

   <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>

Answer 10

这将改变输入，选择等等为旧式灰色，不确定你是否可以在此之后进行操作：在<head> put：

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

Answer 11

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>

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

11 个答案: