Jump to content

Edit the chevron on form dropdown

Go to solution Solved by Beyondspace,

Recommended Posts

  • 2 weeks later...
  • Replies 3
  • Views 2.4k
  • Created
  • Last Reply

Top Posters In This Topic

  • Solution
On 9/14/2021 at 12:51 PM, happyscone said:

Site URL: https://cone-tuna-x47f.squarespace.com/contact

I was able to customize the dropdown styling to my liking, but I can't seem to figure out a way to target the chevron to give it a little more padding on the right so it is not so close to the border line.

Thanks in advance for any help!

 

URL: https://cone-tuna-x47f.squarespace.com/contact

Pass: haircare

 

 

Screen Shot 2021-09-13 at 10.49.00 PM.png

The arrow on your site is the default setting of select tag. You can remove it and add new arrow with some Css Custom.

#block-ecf32290fe36c7c548b6 select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: url(https://api.iconify.design/akar-icons/chevron-down.svg) no-repeat center / contain;
	background-size: 20px;
	background-position: calc(100% - 10px);
}

You can increase or decrease the px value the background-position if your want 'Padding' the arrow more or less

Edited by bangank36

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

I 've try the above Css and here is my result.

image.png.e9a7d36e238e125f8e2212fdbac0332c.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.