Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Edit the chevron on form dropdown


happyscone

Question

  • Answers 3
  • Created
  • Last Reply

Top Posters For This Question

3 answers to this question

Recommended Posts

  • 1
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

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 0

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

image.png.e9a7d36e238e125f8e2212fdbac0332c.png

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, 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...