用jquery css自定義選擇框滾動條 - 是否有跨瀏覽器兼容的解決方案？

Question

我已經搜索了幾個小時了，並找到了一個自定義滾動條/箭頭的例子。我可以找到幾個人談論它如何不可能和最好的想法是不這樣做。

除了這些建議之外，還有一個跨瀏覽器兼容的解決方案嗎？有誰知道任何網站目前使用自定義滾動條的大小，所以也許我可以看看該代碼？

謝謝。

Answer 1

通常，<select>元素被替換爲製作的一套<div> S和<ul>和<li>上即時，使其隱藏，並與您的<li>小號一些事件委託，所以你可以選擇在實物期權隱藏<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樣式設置爲它是有效的。