Question

我是制作网页和本网站的新手。

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

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个标签。

（如果这些问题之前已经重复过，我很抱歉..我试着搜索它们但我找不到任何东西。）

感谢您的时间！

Answer 1

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

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

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

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

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

1 个答案: