javascript - Select2下拉css修改

Question

我有这种情况:

我想将 .select2-dropdown .select2-dropdown--below 移动到 left: 0 和 witdth: 100%(相对于窗口)。如您所见，我已经为它添加了一个 top，但它对其他属性不起作用。

我使用的是最新版本的插件。

我添加了一个示例。你看到那个小时了吗？我希望下拉菜单从左侧开始，并且像规则一样全宽。

jsFiddle

Answer 1

给你:https://jsfiddle.net/9w1Lgbt5/

这是您需要的 CSS:

  span.select2-dropdown.select2-dropdown--below {
    top: 30px !important;    
    width:100vw !important;
    transform:translate(-100px,0) !important;
}

100vw 表示视口(viewport)宽度，它将使用 100% 的窗口宽度。另一个问题是 span.select2-dropdown.select2-dropdown--below 是 select2 类的子类(从左侧移动 100px)。以前不可能在不将子元素更改为 position:fixed 的情况下更改其左侧位置，但是使用 transform 是可能的。 第一个参数是 100px 是因为整个 select2 移动了 -100px，所以我们必须将 child 向左平移 100px 以匹配窗口左侧位置。