样式化选择下拉菜单[关闭]

Question

我正在尝试在下面的屏幕截图中对我的相关选择下拉菜单进行样式化，但我不知道如何。

请问有人知道这个网站是怎么做到的吗？

Answer 1

select 标签不容易用 CSS 定制。因此，我们通常需要隐藏原来的select，创建一个新的元素，用CSS和JS自定义。

例如，给定以下select：

<select class="Dropdown">
    <option value="1">Category 1</option>
    <option value="2">Category 2</option>
    <option value="3">Category 3</option>
    <option value="4">Category 4</option>
    <option value="5">Category 5</option>
    <option value="6">Category 6</option>
    <option value="7">Category 7</option>
    <option value="8">Category 8</option>
    <option value="9">Category 9</option>
    <option value="10">Category 10</option>
</select>

首先，我们隐藏原来的select：

var dropdown = $('.Dropdown').hide();

然后，我们创建一个新的div 元素，并将其附加到我们的页面：

var newDropdown = $('<div/>') // create new div element
    .addClass('NewDropdown') // with class NewDropdown
    .appendTo(document.body); // and append it to page

对于原始select 中的每个option，我们在新下拉列表中创建一个元素。

dropdown.find('option').each(function(index, element){
    var option = $(element); // this is the option from the original select
    var newOption = $('<div/>') // create new div element
        .addClass('NewDropdown-item') // with class NewDropdown-item
        .html(option.html()) // copy content from original option
        .data('value', option.val()) // copy value from original option
        .on('click', onClicked) // add a click listener
        .appendTo(newDropdown); // append it to the new dropdown
});

为方便起见，我们将新创建的下拉项存储在一个变量中：

var newDropdownOptions = newDropdown.find('.NewDropdown-item');

当点击新下拉列表中的一项时，我们将其标记为选中并设置原始select 的值。

function onClicked(){
    newDropdownOptions.removeClass('is-selected'); // deselect all items
    var clickedOption = $(this); // wrap clicked option in jquery
    clickedOption.addClass('is-selected'); // add class to mark clicked option as selected
    dropdown.val(clickedOption.data('value')); // set original select's value
};

JSFiddle 链接：https://jsfiddle.net/Lhrmcouz/