jQuery Select2 CSS 问题

Posted 2023-05-07

【中文标题】jQuery Select2 CSS 问题

【英文标题】：jQuery Select2 CSS issue

【发布时间】：2016-03-04 23:35:23

【问题描述】：

当我将普通的下拉菜单变成 jQuery select2 时。但下拉菜单如下图所示。

我尝试修复 CSS 对齐方式。但我无法让它正常工作。这是我的js。

$(".combo").select2(                    
     allowClear: true,
     width: "resolve" 
);

现在，我想删除关闭标记 (X) 并将下拉符号带入跨度区域。

【问题讨论】：

你是否包含了正确的 css，如果有，请确保没有其他样式会干扰这个。

打开下拉菜单，请检查元素并查看边距吗？

我确定，没有 css 干扰它。

找到了解决方案。这是一小段代码padding: 0px 2px;。现在我解决了。

感谢您的两个回答。这是其他css干扰的错误，

【参考方案1】：

我希望有一些其他 css 样式 令人不安的jquery select2 默认样式。

下同请看默认demo。

$(".combo").select2(
    allowClear: true,
    width: "resolve"
);

.combo 
    width: 200px;

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script>
<select class="combo">
    <option value="1">Opt 1</option>
    <option value="2">Opt 2</option>
    <option value="3">Opt 3</option>
    <option value="4">Opt 4</option>
    <option value="5">Opt 5</option>
</select>

演示：http://jsfiddle.net/kishoresahas/n5hzwkp1/

【讨论】：

我解决了这个问题。无论如何，我投票赞成它的帮助。我只是通过删除干扰它的代码来解决它

@Akelya 这可以帮助其他一些人，这是 SO 的目的之一！

@KevinBrown，感谢您的建议。我按照建议更新了