jQuery Select2 CSS 问题

Posted

技术标签:

【中文标题】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,感谢您的建议。我按照建议更新了

以上是关于jQuery Select2 CSS 问题的主要内容,如果未能解决你的问题,请参考以下文章

js(JQuery)引入select2

js(JQuery)引入select2

jquery中的多选添加/删除选择

jquery.select2 模糊查询

在我的 jquery select2 搜索选项中没有出现

select2插件使用小记