我正在使用以下代码来自定义我的选择下拉箭头：
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;
- }
这很好,并取代了默认的下拉箭头,但问题是箭头图像不可点击.如果我点击它打开的选择框,但我也希望它在我点击箭头图像时打开
解决方法
添加以下规则
- pointer-events:none;
编辑：
应该注意的是IE还不支持这个属性(尽管根据caniuse – 它将在IE11中得到支持)
但是,如果您仍然想要这种方法,您可以使用Modernizer或条件注释(对于IE< 10)和this css hack(对于IE10)使IE恢复为标准内置箭头.
- /*target Internet Explorer 9 and Internet Explorer 10:*/
- @media screen and (min-width:0\0) {
- span.selectWrapper:after
- {
- display:none;
- }
- }
然而,有一个解决方法(也是一个不同的解决方案),我在my answer here提到 – 其中也包含this FIDDLE
