带有css的自定义选择框

Question

Hi I have to make a custom select box and I don't know how .

I have attachated 2 image in my demo link : [1] with the entire select box and [2] with the custom arrow

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


</select>

The problem that I don't know how to change the default arrow from select box.

Demo

Can anyone help me ?Thanks in advance !!

Answer 1

First you need to remove the default arrow using the css property appearance. Next you need to add your custom arrow as a background image. For example

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

I have updated your jsfiddle. Check it out for the reference.

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

Answer 2

I want to propose this custom select. I found this base on the internet, after which I decided to improve the style and some features.

 $(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>