自定义选择下拉箭头不可点击 [英] Customized select dropdown arrow not clickable

问题描述

我使用以下代码自定义我的选择下拉箭头：

HTML ：

 < span class =selectWrapper> 
< select id =rowselectclass =pageinfoselect input-mini> 
< option> ...< / option> 
< / select> 
< / span> 
  

CSS ：

  span.selectWrapper {
 position：relative; 
 display：inline-block; 
 width：65px; 
} 
 
 span.selectWrapper select {
 display：inline-block; 
 padding：4px 3px 3px 5px; 
 margin：0; 
 font：inherit; 
 outline：none; / *从Webkit中删除焦点环* / 
 line-height：1.2; 
 background：＃f5f5f5; 
 height：30px; 
 color：＃666666; 
 border：1px solid #dddddd; 
} 
 
 
 
 
 / *选择箭头样式* / 
 span.selectWrapper：after {
 content：url ../images/arrow_down.png）; 
 position：absolute; 
 top：0; 
 right：0; 
 bottom：0; 
 line-height：30px; 
 padding：0 7px; 
 background：＃f5f5f5; 
 color：white; 
 border：1px solid #dddddd; 
 border-left：0px; 
} 
  

这个工作正常，并替换默认的下拉箭头，但问题是，图片无法点击。如果我点击选择框，它会打开，但我希望它在我点击箭头图像时打开

解决方案

  pointer-events：none; 
   
 
 
 
 编辑：
 
 
 
应该注意的是，IE还不支持此属性（虽然根据 caniuse ） - 它将在IE11中支持）
 
 
 
但是，如果你仍然想要这个方法，你可以使用Modernizer或条件注释（For IE< 10）和此css hack （针对IE10）可将IE还原为标准内置箭头。
  / *目标Internet Explorer 9和Internet Explorer 10：* / 
 @media屏幕和（min-width：0 \0）{
 span.selectWrapper：after 
 {
 display：none; 
} 
} 
  
然而，还有一种解决方法）为此，我在我的回答这里中提到，其中还包含 this FIDDLE  
 
I'm using the following code to customize my select dropdown arrow:

HTML:
<span class="selectWrapper">
    <select id="rowselect" class="pageinfoselect input-mini">
        <option>...</option>
    </select>
</span>
CSS:
span.selectWrapper {
    position: relative;
    display: inline-block;
          width:65px;
}

span.selectWrapper select {
    display: inline-block;
    padding: 4px 3px 3px 5px;
    margin: 0;
    font: inherit;
    outline:none; /* remove focus ring from Webkit */
    line-height: 1.2;
    background: #f5f5f5;
    height:30px;
    color:#666666;
    border:1px solid #dddddd;
}




/* Select arrow styling */
span.selectWrapper:after {
    content: url("../images/arrow_down.png");
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    line-height: 30px;
    padding: 0 7px;
    background: #f5f5f5;
    color: white;
    border:1px solid #dddddd;
    border-left:0px;
}
This works fine and replaces the default dropdown arrow but the problem is that the arrow image is not clickable. If I click on the select box it opens but I want it to open when I click the arrow image as well
解决方案
Add the following rule
pointer-events:none;
EDIT:

It should be noted though that IE doesn't yet support this property (Although according to caniuse - It will be supported in IE11)

BUT, If you still want to this method you can use Modernizer or conditional comments (For IE < 10) and this css hack (for IE10) to make IE revert to the standard built in arrow.
/*target Internet Explorer 9 and Internet Explorer 10:*/
@media screen and (min-width:0\0) { 
    span.selectWrapper:after
    {
        display:none;
    }
}
There is however a workaround (and also a different solution) for this, which I mention in my answer here - which also contains this FIDDLE

                        
这篇关于自定义选择下拉箭头不可点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！