如何在select2中设置小x的样式答案

【问题标题】：How to style little x in select2如何在select2中设置小x的样式
【发布时间】：2020-06-04 23:24:11
【问题描述】：

有没有办法为小 x 设置样式以删除选定的项目？我使用 vanilla js 和 jquery 以及 :before 伪选择器得到它，并且从所有这些中只有伪选择器（部分）有效。无法设置伪选择器样式。

我想拥有，而不是 x，拥有其他任何东西。正如我之前所说，我尝试定位它，但即使我使用

document.querySelectorAll("#forma1 > span > span > span > ul")[0].childNodes[0]

应该针对包含很少x 的跨度，它针对下一个li 元素。我也尝试过间接定位它，通过说“首先定位 li 的 previousSibling”，但无济于事。它不能针对我尝试的任何东西。

我的问题是：有没有办法改变这个范围内的文本，而不是那个小x？

提前多点赞。

编辑1：

小x:

【问题讨论】：

您应该提供更多详细信息。我们不知道你的项目，那么这个 x 是什么？它放在哪里？那些“精选项目”是什么？它们在哪里？到目前为止，请显示您的代码，或者至少张贴一张图片
@NPcompete A x 取消选择。见编辑。
好的，所以您的问题是“如何将这个小 x 放入我的列表中？”，而不是如何设置它，对吗？首先，我认为您的 html 结构存在更大的问题，因为将多个内联容器 (span) 放入内联容器中是不好的做法，将块容器 (ul) 放入内联容器中更糟糕。但尽管如此，你可以将你的 X 包装在一个内联容器中并给它一个类。那么你可以使用你的 querySelectorAll("#forma1 .my-class-for-the-little-x")
@NPcompete x 和 spans 是由 select2 库自动创建的，正如我之前所说，传统的定位方法失败了。所以，我不能把它包起来。

标签： javascript jquery css jquery-select2

【解决方案1】：

你还是没有显示你的代码，所以我只是在 select2.org 的演示页面上试了一下

你可以这样做（我正在使用 querySelector，但如果你有多个项目，你可以使用 querySelectorAll 来做到这一点）：

let x = document.querySelector(".select2-selection");
let y = document.createElement("span");
let z = document.createTextNode("x");
y.classList.add("my-styled-little-x");
y.append(z);
x.append(y);

现在使用 CSS 为您的类设置样式“my-styled-little-x”。

E. G。像这样：

.my-styled-little-x {
    position: absolute;
    top: 0px;
    right: 20px;
    padding: 5px;
    font-weight: bold;
}

【讨论】：

【解决方案2】：

.select2-selection__clear:before {
    content: "yourPlaceholderText";
    position: absolute;
    left: 11px;
    top: 45%;
    transform: translateY(-50%);
    font-weight: 400;
    color: black;
}

这就是我要找的东西。它模仿占位符文本，但实际上它的用途与那个小的 x 相同。

【讨论】：