我已经搜索了几个小时,找到了 0 个带有自定义滚动条/箭头的框的示例。我可以找到一些人们谈论这是如何不可能的引用资料,最好的想法就是不这样做。
除了这些建议之外,是否有跨浏览器兼容的解决方案?有谁知道目前有哪些网站使用自定义滚动条的大小,以便我可以查看该代码?
谢谢。
最佳答案
通常,<select>
元素被动态替换为一组精心设计的 <div>
和 <ul>
和<li>
,将其隐藏,并在您的 <li>
上进行一些事件委托(delegate)这样您就可以选择隐藏中的真实选项<select>
。
例如,它看起来像这样:
$(function(){
$('select:visible').each(function(){
var
$this = $(this),
$select = $('<div/>', {
'css':{
'display': 'inline-block',
'position': 'relative'
}
}),
$items, $ul,
$display = $('<p/>');
$this.hide();
$items = $this.find('option').map(function(){ return '<li data-value="'+this.value+'">'+$(this).text()+'</li>'; }).get().join(''); // map the options from the select in an html string
$ul = $('<ul/>', {
'css':{
'display':'none',
'position':'absolute',
'bottom': '0',
'width': 'inherit'
}
});
$ul.append($items); // append the items from the original select
$select.append($display).append($ul); // create the "fake" select
$this.before($select);
$ul.on('click', 'li', function(e){
$display.text($(e.target).text()); // set the text of your select
$this.val($(e.target).data('value')); // set the value of the original select that is hidden
});
$select.click(function(){
$ul.toggle(); // show/hide the items
});
});
});
我现在创建了这段代码,但还没有测试它,但这就是想法。所有样式 (CSS) 都由您决定。只需确保将 LI 的类设置为 white-space: nowrap;
因此它可以根据需要进行扩展。
现在有了所有这些自定义 HTML,您可以添加自己的箭头,对于滚动条,您可以使用现有的解决方案(例如 jScrollpane)并附加到您的 $ul
保存您的元素,提醒设置 max-height
css样式才能生效。
关于jquery - 使用 jquery css 自定义选择框滚动条 - 是否有跨浏览器兼容的解决方案?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13690907/