帶有css的自定義選擇框

Question

嗨，我必須制作一個自定義選擇框，但我不知道如何。

我在演示鏈接中附加了 2 張圖片：[1] 帶有整個選擇框，[2] 帶有自定義箭頭

<select class="custom-select">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>4</option>


</select>

我不知道如何從選擇框中更改默認箭頭的問題。

演示

任何人都可以幫助我嗎？提前致謝！

Answer 1

首先，您需要使用 css 屬性外觀刪除默認箭頭。 接下來，您需要添加自定義箭頭作為背景圖像。 例如

.custom-select{
border:1px solid #ccc;
border-radius:5px;
color:#ccc;
appearance:none;
-webkit-appearance:none;
-moz-appearance:none;
background-image: url('http://www.fifa.com/imgml/icons/events/arrow_Down_Red.gif') ;
background-position: center right;
background-repeat:no-repeat;
padding-right:10px;
}

我已經更新了你的 jsfiddle。 檢查它以供參考。

http://jsfiddle.net/XbJ57/3/

Answer 2

我想提出這個自定義選擇。 我在互聯網上找到了這個基礎，之后我決定改進樣式和一些功能。

 $(document).ready(function() { // use jQuery lib var $select = $("select"), $speed = "fast"; $select.each(function() { // Allow default browser styling if ($(this).hasClass("default")) { return; } $(this).css("display", "none"); // Generate fancy select box $(this).after('<ul class="fancy-select" style="display: none;"></ul>'); var $current = $(this), $fancy = $current.next(".fancy-select"); // Get options var $options = $(this).find("option"); $options.each(function(index) { var $val = $(this).val(), $text = $(this).text(), $disabled = ""; // Add class for disabled options if ($(this).attr("disabled")) $disabled = " disabled"; if (index == 0) { // Create clickable object from first option $fancy.before('<span class="selected" data-val="' + $val + '">' + $text + "</span>"); } // Load all options into fake dropdown $fancy.append('<li class="fancy-option' + $disabled + '" data-val="' + $val + '">' + $text + "</li>"); // Update fake select box if this option is selected if ($(this).attr("selected")) { $(this).parent("select").val($val); $(this).parent("select").next(".selected").attr("data-val", $val).text($text); } }); }); // Show/hide options on click $(".selected").click(function(target) { var $box = $(this).next(".fancy-select"), $target = target, $object = $(this); // Prevent multiple open select boxes if ($box.is(":visible")) { $box.slideUp($speed); return; } else { $(".fancy-select").slideUp(); $box.slideDown($speed); } // Click outside select box closes it $target.stopPropagation(); if ($box.css("display") !== "none") { $(document).click(function() { $box.slideUp($speed); }); } }); // Make selection $(".fancy-option").click(function() { var $val = $(this).attr("data-val"), $text = $(this).text(), $box = $(this).parent(".fancy-select"), $selected = $box.prev(".selected"), $disabled = $(this).hasClass("disabled"); // Basic disabled option functionality if ($disabled) { return; } $box.slideUp($speed); // Update select object's value // and the fake box's "value" $selected.prev("select").val($val); $selected.attr("data-val", $val).text($text); // Get Output var $what = $("#what").val(), $when = $("#when").val(); console.log($what); }); });

 .selectField { position: relative; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .selectField .selected { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 13px 20px; background-color: #fff; border: 1.8px solid rgba(107, 107, 107, 0.4); border-radius: 3px; width: 100%; cursor: pointer; color: black; } .selectField .selected:after { content: ""; width: 0; height: 0; border-style: solid; margin-top: 1px; border-width: 5px 4px 0 4px; border-color: #6b6b6b transparent transparent transparent; } .selectField .fancy-select { list-style: none; margin-top: 5px; border-radius: 3px; border: 1.8px solid rgba(107, 107, 107, 0.4); width: 100%; max-height: 50vh; margin: 0; margin-top: 10px; padding: 0; background-color: white; overflow-y: auto; position: absolute; z-index: 2; } .selectField .fancy-select .fancy-option { padding: 9px 20px; background-color: #fff; color: black; cursor: pointer; } .selectField .fancy-select .fancy-option:first-child { border-top-left-radius: 3px; border-top-right-radius: 3px; } .selectField .fancy-select .fancy-option:last-child { border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; } .selectField .fancy-select .fancy-option:not(.disabled):hover { background-color: #6b6b6b; color: white; } .selectField .fancy-select .fancy-option.disabled { color: rgba(0, 0, 0, 0.5); cursor: default; }

 <div class="selectField"> <select name="select" id="what"> <option value="Select your hobby" disabled>Select your hobby</option> <option value="cinema">Cinema</option> <option value="sport">Sport</option> <option value="friends">Friends</option> </select> </div> <!-- jQuery library --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>