Arrow spacing - .w-select

Design help Custom code
1

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

Captura de tela 2021-02-26 112020

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

3 Likes
2

@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.

4 Likes
3

thanks a lot!!! i will make this

1 Like
4

Woww this is great thanks

6

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

7

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