如何使用 CSS 设置 Select2 输入标签的样式以及如何限制它们答案

【问题标题】：How to style Select2 input tags with css and how to limit them如何使用 CSS 设置 Select2 输入标签的样式以及如何限制它们
【发布时间】：2014-08-09 05:23:45
【问题描述】：

我对制作网页和这个网站非常陌生。

我设法制作了一个添加标签的系统；但是，我不知道如何设计它。我试着做：

input[type=text] { border-radius:5px;}

但这不起作用。这是我的完整代码：

<html>

  <head>
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="select2/select2.js"></script>
    <script>
      $(function(){
        $('#select').select2({
          // specify tags
          tags: ["Value 1", "Value2"],
          maximumSelectionSize: 3
        });
      });
    </script>

    <link rel="stylesheet" href="select2/select2.css">
    <style>
        border-radius:20px;
    </style>
  </head>

  <body>
    <input id="select" style="width:300px" placeholder="Select Categories">
  </body>

</html>

这是我的第一个问题。

我的第二个问题是maximumSelectionSize: 3 不好用：如果你写三个标签，它会提醒你限制，不允许更多。但是当你删除它们并尝试输入新的时，它仍然显示你已经写了3个标签。

（如果这些问题以前被重复过，我深表歉意。我尝试搜索它们但找不到任何东西。）

感谢您的宝贵时间！

【问题讨论】：

目前，我可以回答您的两个问题之一。为了尝试更改 css，'input[type=text]' 将不起作用，因为 select2 将隐藏任何选择元素并基于前者生成自定义元素。这样，每个自定义元素都有这个类：'select2-choice'。所以用这个类覆盖样式。
jsfiddle.net/kheema/564e2x0h/3 这对你有帮助吗？
Kheema，为此提供的外部资源有所帮助。我使用了这些资源，而不是保存在我计算机上的资源，现在我的第二个问题已解决。

标签： html css jquery-select2

【解决方案1】：

您需要更改 select2.css 样式以增加边框半径

使用所需的边框半径修改以下样式选择器：
.select2-container-multi .select2-choice {border-radius:20px;}

对于第二个问题，更改您的 select2 函数以匹配以下内容，并将输入元素更改为 html 中的 div 元素，并从标记中删除“占位符”属性。这是代码示例：

<script>
   $(document).ready(function(){
     $('#select').select2({
            tags: ["Value1", "Value2", "Value3", "Value4", "Value5"],
            placeholder: "Select Categories",
            maximumSelectionSize: 3
     });
    });
</script>

<div id="select" style="width:300px"></div>

【讨论】：

您好！非常感谢你这么快的回复。我发现第二个问题在 localhost 上不起作用，但在 jfiddle 上起作用。它与
或标签无关。我发现这是因为我使用了错误的外部资源（select2.js）。感谢您专门告诉我如何修复边界半径。 jsfiddle.net/Tanay_Singhal/dth1xaL4/1 编辑：样式使用 .select2-container-multi .select2-choices { （只需要添加那个小 s 但我想通了哈哈）:)
没问题 Drago，在完成其他一些东西后凌晨 3 点才做这个，所以我没有完全正确地做这件事并不感到惊讶。很高兴我可以帮助您朝着正确的方向前进。享受吧！