自定义组件选择2
Posted
技术标签:
【中文标题】自定义组件选择2【英文标题】：Customize component select2 【发布时间】：2021-10-20 23:25:12 【问题描述】：这个论坛的新手。我希望有人可以帮助我解决这个问题。我正在使用组件 select2 (https://select2.org) 进行选择中的某些输入。我想在同一页面中以两种不同的方式自定义 select2。
我想更改字体并删除一个边框并更改另一个字体。
代码如下：
$("#example1").select2(
placeholder: "",
selectOnClose: true
);
$("#example2").select2(
placeholder: "",
selectOnClose: true
);<html>
<head>
<title>Using Select2</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Select2 CSS -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css">
</head>
<body>
<br>
<br>
<div class="container">
<div class="col-md-6">
<label>I want font size 18 and no border</label>
<select id="example1" class="select2">
<option>Java</option>
<option>javascript</option>
<option>php</option>
<option>Visual Basic</option>
</select>
</div>
<br>
<br>
<div class="col-md-6">
<label>I want font size 15</label>
<select id="example2" class="select2">
<option>Java</option>
<option>Javascript</option>
<option>PHP</option>
<option>Visual Basic</option>
</select>
</div>
</div>
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Select2 -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.full.min.js'></script>
</body>
</html>我还使用示例 https://jsfiddle.net/Lfvr3m74/ 创建了一个 jsfiddle
最好的问候 回复
【问题讨论】：
一个好的开始是给它们两个类，这样你就可以用 CSS 设置它们的样式。如果添加类对您来说工作量太大，或者通过他们的 ID 设置样式。 我试过这个没有运气：#example1.select2-container .select2-selection--single .select2-selection__rendered font-size: 18px;#example1.select2-container 不存在。请参阅下面的答案。
fyi，当您使用 select2 插件时，它会隐藏带有该 ID #example1 的原始 <select>，然后注入一堆 <span> 以创建“puesdo-dropdown”样式目的（因为众所周知，选择是不可样式化的）。该插件会在原始下拉列表之后立即注入此虚假下拉列表，因此您可以这样编写样式：#example + .select2-container .... 而不是 #example.select2-container ...。 + css 选择器选择紧跟在前一个选择器之前的元素
此外，下拉列表本身是在关闭 </body> 标记之前注入的（因为可能出现溢出和堆叠问题），因此最好使用“dropdownCssClass”选项并设置列表样式围绕那个班级。阅读选项文档（此处）[select2.org/configuration/options-api]。还有一个“selectionCssClass”选项来帮助设置我上面提到的假下拉输入的样式
【参考方案1】：
您的选择器中有错误：
#example1.select2-container .select2-selection--single .select2-selection__rendered
font-size: 18px;
#example 元素没有 select2-container 类。 select2-container 在它下面。
例如，您可以使用这些选择器：
span.select2-container--default .select2-selection--single
border: none;
.select2-container .select2-selection--single .select2-selection__rendered
font-size: 18px;
所以不要使用选择的ID。而是看到这个问题和答案：Add class to select2 element
【讨论】：
以上是关于自定义组件选择2的主要内容，如果未能解决你的问题，请参考以下文章
Angular 2 在 3rd 方指令中使用自定义组件选择器
关于 JSF 2.0 自定义组件和 Primefaces 的帮助