Select2 - 我们可以设置下拉菜单以匹配页面其余部分的样式吗？答案

【问题标题】：Select2 - can we set the dropdown menu to match the style of the rest of the page?Select2 - 我们可以设置下拉菜单以匹配页面其余部分的样式吗？
【发布时间】：2020-03-04 18:10:11
【问题描述】：

我浏览了 Select2 (https://select2.org) 的文档并搜索了他们的论坛，但没有找到答案 - 可能是我的经验有限，以至于我什至没有提出正确的问题：

我正在使用 Materialize css (https://materializecss.com/) 作为我网站的样式。如何让我的 Select2 下拉菜单与页面其余部分的外观相匹配？

这是我的 HTML 代码：

<!doctype html>
<html>   
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />
</head>

<body class="body-custom">
    <div class="input-field col s12">
       <select class="js-example-basic-single" name="country" id="country">
             <option value="" disabled selected>Choose Country</option>
             <option value="Afghanistan">Afghanistan</option>
             <option value="Åland Islands">Åland Islands</option>
             <option value="Albania">Albania</option>
       </select>
    </div>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"> 
</script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>
<script src="js/script.js"></script>

</body>

</html>

CSS：

#form {
    max-width: 700px;
    margin-top: 50px;
}

.type label {
    margin-right: 50px;
}

#proid {
    display: none;
}

.info {
    padding-left: 10px;
    padding-bottom: 20px;
    padding-top: 50px;
}

.nav-custom {
    background-color: #333947;
}

.body-custom {
    background-color: #f0f7fa;
}

.title {
    font-family: "Open Sans";
    font-weight: 600;
}

编辑 1：

Codepen 链接：

https://codepen.io/Nola111/pen/yLNzeQp

【问题讨论】：

好吧，我猜你必须编写 CSS 来按照你想要的方式设置样式。这里有几个例子 - example 1 和 example 2
哇哦，好吧，我没有意识到这是一个手动过程。我认为可能有一种方法可以用几行代码来匹配样式。好的，在这种情况下，我将不得不联系我的一位了解 CSS 的朋友！
很难帮助 - 如果我将该代码粘贴到我的编辑器中，则不会显示任何内容。如果您可以构建一个codepen作为示例，它可能会帮助我们帮助您。
@SeanDoherty 绝对。我从来没有做过 codepen，但现在比其他任何时候都好 - 现在就开始工作。
@SeanDoherty 我们开始 - codepen.io/Nola111/pen/yLNzeQp 感谢您的建议！

标签： css jquery-select2

【解决方案1】：

好的，这是一项正在进行的工作，因为我确定您接下来会要求我为下拉菜单设置样式..！

https://codepen.io/doughballs/pen/zYGERzX

首先，Select2 强制选择 700px 宽度，这使其比 materializecss 输入更宽（始终为宽度：100%）。所以我们在这里覆盖它。很遗憾，需要 !important 标志。

.select2 {
  width:100% !important;
}

接下来，实际的选择字段。如您所知，materializecss 使用非常少的样式 - 实际上只是一个边框底部。因此，我查看了应用于所有 materializecss input fields 的基本样式，将它们复制到 codepen 中，然后将它们应用于以下两个元素。 Select2 做了一些真正时髦的事情，有很多嵌套的 div（呃），而且花了一点时间才弄清楚它到底在做什么：

span.select2-selection.select2-selection--single,
span.select2-selection__rendered {
    // These are base materializecss input styles
    padding-left:0 !important;
    position: relative;
    cursor: pointer;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #9e9e9e;
    outline: none;
    height: 3rem;
    line-height: 3rem;
    width: 100%;
    font-size: 16px;
    margin: 0 0 8px 0;
    padding: 0;
    display: block;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    z-index: 1;
    border-radius: 0;
}

最后一点 - 我能问一下为什么您使用 3rd 方库进行 Selects 吗？我对 Select2 了解不多，我确实快速浏览了文档，显然它们为 Select 输入提供了扩展功能。 Materializecss 可以做同样的事情，而无需覆盖样式和导入额外的 css。

如果您有兴趣，我可以向您展示一个使用自动完成功能来获得与您的示例类似的功能的 codepen。 Here

【讨论】：

哇，肖恩，太棒了！首先，不，我不会要求您为下拉菜单设置样式，尤其是因为您在回答中提到了能够在 Materialise 中执行此操作的内容。为了回答您的问题，我选择了 Select2，因为我不知道 Materialize 有一个下拉菜单，您可以在其中开始输入并过滤列表！这是个好消息！我现在正在看你的例子。同时，我正在标记您的答案，因为您确实完成了我的要求。感谢您的努力！
没问题。我对这个框架了如指掌，所以如果关于自动完成的任何内容没有意义，请告诉我。本质上，我们将最小字符设置为 0 (minLength)，这会自动将所有选项显示在焦点上 - 通常，在传统的自动完成中，我们会等待用户输入至少一个或 2 个字符，然后再显示选项。还有一个额外的检查来查看输入的内容是否存在，如果不存在，我们删除该字母。这是另一个问题的解决方案，因此您可能希望忽略该部分。