Arrow spacing - .w-select

[Thiago_Mota]

How can I add a spacing so that the arrow is not so far from the corner of the field?

---

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

[AlexManyeki (AlexM)]

@Thiago_Mota

Hey Thiago,

This appearance is created by Webkit browsers rather than Webflow’s css. You can reset this with css as follows;

In your site’s header (Dashboard > Custom Code)

<style>
  select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
  }
</style>

This will get rid of the default arrow. You the use the Webflow designer to add a background svg arrow image with the dimensions as needed.

[Thiago_Mota]

thanks a lot!!! i will make this

[Rahul_Nagpal]

Woww this is great thanks

[Marvinkr (Marvin Kaunda)]

Hey any ideas on how to set up properly the image background?

[austin (Austin Thesing)]

You need to select your select field and then apply a background image like you would normally.

You’ll need to enter specific width and height to get the icon or image small enough inside the field