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

Question

我浏览了 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 link:

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

Answer 1

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

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

所以首先，Select2 在 select 上强制使用 700 像素的宽度，这使得它比 materializecss 输入（始终为宽度：100%）更宽).所以我们在这里覆盖它。不幸的是需要!important 标志。

.select2 {
  width:100% !important;
}

接下来，实际的 select 字段。如您所知，materializecss 使用非常简单的样式——实际上只是一个边框底部。所以我查看了应用于所有 materializecss input fields 的基本样式，将它们复制到代码笔中，然后将它们应用于以下两个元素。 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;
}

最后一点 - 我能问一下你为什么要为 Select s 使用第 3 方库吗？我不太了解 Select2，我确实快速浏览了文档，显然它们为 Select 输入提供了扩展功能。 Materializecss 可以在不覆盖样式和导入额外的 css.

的情况下做同样的事情

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

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

Select2 - can we set the dropdown menu to match the style of the rest of the page?

css

jquery-select2