Question

您好，我必须制作一个自定义选择框，我不知道如何。

我在演示链接中附加了2张图片：[1]整个选择框和[2]自定义箭头

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


</select>

我不知道如何更改选择框中的默认箭头的问题。

Demo

任何人都可以帮助我吗？先谢谢!!

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>

自定义选择框与CSS

2 个答案: