我根据此处的解决方案使用自定义选择/下拉菜单:https://stackoverflow.com/a/10190884/1318135
这个功能很好,只是选项只有在您单击该框时才会显示。单击右侧的“箭头”不会弹出下拉选项。有什么解决方法?
http://jsfiddle.net/XxkSC/553/
HTML:
<label class="custom-select">
<select>
<option>Sushi</option>
<option>Blue cheese with crackers</option>
<option>Steak</option>
<option>Other</option>
</select>
CSS:
label.custom-select {
position: relative;
display: inline-block;
}
.custom-select 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: #000;
color:white;
border:0;
}
/* Select arrow styling */
.custom-select:after {
content: "▼";
position: absolute;
top: 0;
right: 0;
bottom: 0;
font-size: 60%;
line-height: 30px;
padding: 0 7px;
background: #000;
color: white;
}
.no-pointer-events .custom-select:after {
content: none;
}
最佳答案
根据您的客户群, 一段非常简单的代码:
pointer-events:none;
在此处查看浏览器支持:http://caniuse.com/pointer-events
编辑:刚刚躺在床上,可能想到了另一个解决方案,但无法在我的手机上进行测试,但也许 jQuery mousedown 触发器可能是一个选项,可以在点击前瞬间隐藏箭头,也许吧?
或者这个,不确定它是如何使用的,但是在另一个线程中看到它: $('#select-id').show().focus().click();
如果我在我的电脑前,我会测试它...
关于html - 纯 CSS 选择菜单/下拉菜单 : How to make right arrow function?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11787368/