How can i change select arrow

[RabbiIslamRony]

https://prnt.sc/FR7gHjCn4EBo

[juujisai]

Hi! I see there is no select arrow customization yet. We will add this soon.

There is one thing we can do right now though. If we add a custom class that would let us get the arrow wrapper with querySelector, we will be able to change the innerHTML of that wrapper.

Let's add a select-arrow class to the data-te-class-select-arrow-default attribute like this:

    <select 
      data-te-select-init
      data-te-class-select-arrow-default="top-2 select-arrow"
      >
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
      <option value="4">Four</option>
      <option value="5">Five</option>
      <option value="6">Six</option>
      <option value="7">Seven</option>
      <option value="8">Eight</option>
    </select>

Then we can search for that element with querySelector. I've added a new icon from heroicons.

document.querySelector(".select-arrow").innerHTML = `
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
  <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 5.25l-7.5 7.5-7.5-7.5m15 6l-7.5 7.5-7.5-7.5" />
</svg>
`;