风格化选择下拉列表[关闭]

Question

Closed. This question needs to be more focused. It is not currently accepting answers.

                </div>
            </div>
        </div>
                <hr class="my12 outline-none baw0 bb bc-powder-2">
            <div class="grid fw-nowrap fc-black-600">
                    <div class="grid--cell mr8">
                        <svg aria-hidden="true" class="svg-icon iconLightbulb" width="18" height="18" viewbox="0 0 18 18"><path d="M9.5.5a.5.5 0 0 0-1 0v.25a.5.5 0 0 0 1 0V.5zm5.6 2.1a.5.5 0 0 0-.7-.7l-.25.25a.5.5 0 0 0 .7.7l.25-.25zM1 7.5c0-.28.22-.5.5-.5H2a.5.5 0 0 1 0 1h-.5a.5.5 0 0 1-.5-.5zm14.5 0c0-.28.22-.5.5-.5h.5a.5.5 0 0 1 0 1H16a.5.5 0 0 1-.5-.5zM2.9 1.9c.2-.2.5-.2.7 0l.25.25a.5.5 0 1 1-.7.7L2.9 2.6a.5.5 0 0 1 0-.7z" fill-opacity=".4"></path><path opacity=".4" d="M7 16h4v1a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1v-1z" fill="#3F3F3F"></path><path d="M15 8a6 6 0 0 1-3.5 5.46V14a1 1 0 0 1-1 1h-3a1 1 0 0 1-1-1v-.54A6 6 0 1 1 15 8zm-4.15-3.85a.5.5 0 0 0-.7.7l2 2a.5.5 0 0 0 .7-.7l-2-2z" fill="#FFC166"></path></svg>
                    </div>
                <div class="grid--cell lh-md">
                    <p class="mb0">
                        <b>Want to improve this question?</b> Update the question so it focuses on one problem only by <a href="/posts/28629359/edit">editing this post</a>.
                    </p>
                    <p class="mb0 mt6">Closed <span title="2015-02-20 13:43:35Z" class="relativetime">5 years ago</span>.</p>
                </div>
            </div>
    </aside>

I'm trying to stylize my related select drop down like this in the below screenshot, but I can't work out how.

Please could someone have any clue how this website did it?

</div>

Answer 1

select tags aren't easily customizable with CSS. Therefore, we usually need to hide the original select and create a new element that will be customized with CSS and JS.

For example, given the following 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>

First, we hide the original select:

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

Then, we create a new div element, and append it to our page:

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

For each option in our original select, we create an element inside our new dropdown.

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
});

For convenience, we will store the newly created dropdown items in a variable:

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

When one of the items in the new dropdown is clicked, we mark it as selected and set the original select's value.

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 link: https://jsfiddle.net/Lhrmcouz/