select2 高度随主题变化:经典无法正常工作
select2 height change with theme: classic not working properly
当我尝试更改 select2
下拉菜单的高度时,箭头下拉菜单的高度没有改变,所以它看起来很奇怪,文本看起来也很奇怪。如何使箭头下拉菜单的高度与 select 高度匹配。
这是我的代码。
<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;
}
你必须使用三个 classes:
select2-selection__arrow
用于箭头
select2-container .select2-selection--single
用于 select 离子容器
select2-selection__rendered
用于渲染文本
如果您只想更改 select 框的一部分,您可以将自定义 class 添加到 $container
,如下所示:$($('#cars').data('select2').$container).addClass('carclass')
然后使用 class 改变高度。
$("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>
当我尝试更改 select2
下拉菜单的高度时,箭头下拉菜单的高度没有改变,所以它看起来很奇怪,文本看起来也很奇怪。如何使箭头下拉菜单的高度与 select 高度匹配。
这是我的代码。
<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;
}
你必须使用三个 classes:
select2-selection__arrow
用于箭头
select2-container .select2-selection--single
用于 select 离子容器
select2-selection__rendered
用于渲染文本
如果您只想更改 select 框的一部分,您可以将自定义 class 添加到 $container
,如下所示:$($('#cars').data('select2').$container).addClass('carclass')
然后使用 class 改变高度。
$("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>