jquery - 使用 jquery css 自定义选择框滚动条 - 是否有跨浏览器兼容的解决方案？

Question

我已经搜索了几个小时，找到了 0 个带有自定义滚动条/箭头的框的示例。我可以找到一些人们谈论这是如何不可能的引用资料，最好的想法就是不这样做。

除了这些建议之外，是否有跨浏览器兼容的解决方案？有谁知道目前有哪些网站使用自定义滚动条的大小，以便我可以查看该代码？

谢谢。

Answer 1

通常，<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样式才能生效。