javascript - select2 高度随主题变化:经典无法正常工作
问题描述
当我尝试更改select2
下拉菜单的高度时,箭头下拉高度不会改变,所以看起来很奇怪,文本也看起来很奇怪。如何使箭头下拉菜单的高度与选择高度匹配。
这是我的代码。
<select name="cars" id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="platform">Platform</option>
</select>
var select2 = $("select").select2({
theme: "classic",
});
select2.data('select2').$selection.css('height', '100px');
编辑:我想出箭头,但文字看起来仍然很奇怪。
.select2-selection__arrow {
height: 100px !important;
}
解决方案
您必须使用三个类:
select2-selection__arrow
是为箭头
select2-container .select2-selection--single
用于选择容器
select2-selection__rendered
用于渲染文本
如果您只想更改某些选择框,您可以添加自定义类,$container
如下所示:$($('#cars').data('select2').$container).addClass('carclass')
然后使用该类更改高度。
$("select").select2({
theme: "classic",
});
$($('#cars').data('select2').$container).addClass('carclass')
.carclass .select2-selection__rendered {
line-height: 100px !important;
}
.carclass.select2-container .select2-selection--single {
height: 100px !important;
}
.carclass .select2-selection__arrow {
height: 100px !important;
}
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
<select name="cars" id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="platform">Platform</option>
</select>
<select name="cars1" id="cars1">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="platform">Platform</option>
</select>
推荐阅读
- amazon-web-services - AWS IAM 策略:多个操作和多个资源
- opencv - 如何确保所有图像的方向相同?
- ruby-on-rails - 在 Rails 5 中,我可以构造一个范围来获取我的关系字段吗?
- shell - 带参数的 CURL 命令行
- node.js - 在 Javascript Web 应用程序中实施 SAML SSO 是否需要外部身份提供程序?
- flutter - 颤振升级每次在'颤振通道之后下载新的Dart SDK
' - c# - 添加多个带有文本和图像的图片框或标签
- r - r - 多级重复测量 ANCOVA 的 emmeans 成对分析
- java - Apache Repo 服务器替代品
- matlab - 基于十进制表数据创建二进制表 - Matlab