在 React quill 中使用向下箭头将 select 更改为自定义 select

Question

有什么方法可以将此 select 下拉菜单更改为自定义 select 下拉菜单，使用向下箭头而不是默认的羽毛笔箭头？

Answer 1

您可以 select ql-picker-label，并通过设置 display: none 隐藏 svg 中的默认图标（双向箭头）。然后，由于文本本身包含在 ::before pseudo-element 中，您可以在 ql-picker-label 本身上设置 background-image。下面的代码应该是 self-explanatory。但是，因为文本在 ::before 元素内，我找不到在图标和文本之间制作 space 的简单方法。也许，您可以编辑图标图像，并在其前面手动插入 space。

下面的示例代码将 select 所有 ql-picker-label 元素，您可以通过输入更具体的 selector 来避免此行为。

.ql-picker-label svg {
  display: none;
}

.ql-picker-label{
  display: inline-block;
  background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
  background-repeat: no-repeat;
  background-position: center right;
}

在 React quill 中使用向下箭头将 select 更改为自定义 select

Change the select to custom select with down arrow in react quill

react-quill