react-quill

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

Is there a way I can change this select drop down to a custom select drop down with a down arrow instead of the default quill arrows?

quill select

Solution

  • You can select ql-picker-label, and makes its default icon (the double pointing arrow) which is enclosed within an svg hidden, by setting display: none. Then, since the text itself is enclosed within the ::before pseudo-element, you can set the background-image on the ql-picker-label itself. The code below should be self-explanatory. However, because the text is within ::before element, I could not find an easy way to make space between the icon and the text. Perhaps, you can edit the icon image, and manually insert space before it.

    This sample code below will select all ql-picker-label elements, you can avoid this behavior by entering more specific selectors.

    .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;
}