Jump to content

Customise arrow in .variant-option select

Recommended Posts

Site URL: https://www.eshertennis.co.uk/eventstest-1

Hi!

Does anyone know how to reposition or restyle the little dropdown arrow in the Product Block variant option select? It's a little closer to the right-hand edge than I would like.

I've added the code below to increase the height of the box and increase the padding of the text from the left side, but I'm stuck on how to move the little arrow. Does anyone know how?
 

.variant-option select {
  max-width: 100%;
height: 50px;
padding-left: 10px;
}



504130869_Screenshot2021-12-02at23_31_13.png.c5d553abaa1044715fbaf02ead5a198a.png

Link to comment
14 hours ago, jbassett said:

Site URL: https://www.eshertennis.co.uk/eventstest-1

Hi!

Does anyone know how to reposition or restyle the little dropdown arrow in the Product Block variant option select? It's a little closer to the right-hand edge than I would like.

I've added the code below to increase the height of the box and increase the padding of the text from the left side, but I'm stuck on how to move the little arrow. Does anyone know how?
 

.variant-option select {
  max-width: 100%;
height: 50px;
padding-left: 10px;
}



504130869_Screenshot2021-12-02at23_31_13.png.c5d553abaa1044715fbaf02ead5a198a.png

Try adding to Home > Design > Custom Css

/*Setting for arrow in selection variant --start*/
.variant-option select {
	appearance: none;
  	-webkit-appearance:none;
	width: 100%;
}

.variant-option .variant-select-wrapper {
	position: relative;
	width: 50%;
}

.variant-option .variant-select-wrapper:after {
	content: url('https://api.iconify.design/ep/arrow-right.svg?color=black&rotate=90deg');
	position: absolute;
	display: block;
	top: 55%;
	transform: translateY(-50%);
	right: 3%;
 /*change the position of arrow*/
	pointer-events: none;
}

/*Setting for arrow in selection variant --end*/

Change the value of right: xxx until it meets your requirement

Let me know how it works on your site

Press 👍 or mark this answer as solution to help another one too

Edited by bangank36
update for safari

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 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
7 hours ago, bangank36 said:

Try adding to Home > Design > Custom Css

/*Setting for arrow in selection variant --start*/
.variant-option select {
	appearance: none;
	width: 100%;
}

.variant-option .variant-select-wrapper {
	position: relative;
	width: 50%;
}

.variant-option .variant-select-wrapper:after {
	content: url('https://api.iconify.design/ep/arrow-right.svg?color=black&rotate=90deg');
	position: absolute;
	display: block;
	top: 55%;
	transform: translateY(-50%);
	right: 3%;
 /*change the position of arrow*/
	pointer-events: none;
}

/*Setting for arrow in selection variant --end*/

Change the value of right: xxx until it meets your requirement

Let me know how it works on your site

Press 👍 or mark this answer as solution to help another one too

Actually, I just realised while is this perfect now on Chrome, it's caused an issue on Safari. I've attached an image from my iPad and Safari on Mac.

Safari seems to apply different styling to the variant selector. You can see from the attachment, it's a different height, has a grey background on iPad, and rounded corners, and adds its own little arrows onto the product variant selector.

This means the styling is different to the rest of my fields. And there's a conflict between the blue arrows and the black one your code provides.

Do you know how to force Safari to correctly implement your code, @bangank36?

Screenshot 2021-12-03 at 13.46.40.png

image0 (6).jpeg

Link to comment
38 minutes ago, jbassett said:

Actually, I just realised while is this perfect now on Chrome, it's caused an issue on Safari. I've attached an image from my iPad and Safari on Mac.

Safari seems to apply different styling to the variant selector. You can see from the attachment, it's a different height, has a grey background on iPad, and rounded corners, and adds its own little arrows onto the product variant selector.

This means the styling is different to the rest of my fields. And there's a conflict between the blue arrows and the black one your code provides.

Do you know how to force Safari to correctly implement your code, @bangank36?

Screenshot 2021-12-03 at 13.46.40.png

image0 (6).jpeg

I've just updated my previous for safari

image.png.7c3b99c509c2364db5a7e6d35563e16e.png

Kindly try again and let me know how it works

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 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

@bangank36 - thank you so much once again. This has fixed the issue.

However, I've noticed a strange effect on product pages now. I'm using a mixture of product pages and product blocks on standard pages.

On product pages, the arrow icon has rotated 90 degrees so it's facing the wrong direction! The black screenshot is from a PRODUCT PAGE (incorrect on Chrome and Safari), the white screenshot is from a PRODUCT BLOCK (correct on Chrome and Safari)

Here's a product page: https://www.eshertennis.co.uk/junior-coaching-programme/p/blue-stage-ages-5-6

I can see the issue is somewhere in this part of your code:

.variant-option .variant-select-wrapper:after {
content: url('https://api.iconify.design/ep/arrow-right.svg?color=black&rotate=90deg');
position: absolute;
display: block;
top: 55%;
transform: translateY(-50%);
right: 3%;
 /*change the position of arrow*/
pointer-events: none;
}

But I can't seem to change anything that makes it work on both product blocks and product pages.

Again, I am so grateful for your help.

Screenshot 2021-12-03 at 14.41.15.png

Screenshot 2021-12-03 at 14.41.05.png

Link to comment
3 hours ago, jbassett said:

@bangank36 - thank you so much once again. This has fixed the issue.

However, I've noticed a strange effect on product pages now. I'm using a mixture of product pages and product blocks on standard pages.

On product pages, the arrow icon has rotated 90 degrees so it's facing the wrong direction! The black screenshot is from a PRODUCT PAGE (incorrect on Chrome and Safari), the white screenshot is from a PRODUCT BLOCK (correct on Chrome and Safari)

Here's a product page: https://www.eshertennis.co.uk/junior-coaching-programme/p/blue-stage-ages-5-6

I can see the issue is somewhere in this part of your code:

.variant-option .variant-select-wrapper:after {
content: url('https://api.iconify.design/ep/arrow-right.svg?color=black&rotate=90deg');
position: absolute;
display: block;
top: 55%;
transform: translateY(-50%);
right: 3%;
 /*change the position of arrow*/
pointer-events: none;
}

But I can't seem to change anything that makes it work on both product blocks and product pages.

Again, I am so grateful for your help.

Screenshot 2021-12-03 at 14.41.15.png

Screenshot 2021-12-03 at 14.41.05.png

Have you solved it yet? It seems that you 've set another style for your product item page, doesn't it?

image.thumb.png.a5a7dc7830208b41ed97f89927352ef3.png

 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 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

No, I haven’t solved it. The product pages are live to customers at the moment, so I’ve just removed the code you supplied for the product blocks for the time being.

It would be great to get a fix, if you know how though!

Edited by jbassett
Link to comment
On 12/4/2021 at 5:16 AM, jbassett said:

No, I haven’t solved it. The product pages are live to customers at the moment, so I’ve just removed the code you supplied for the product blocks for the time being.

It would be great to get a fix, if you know how though!

Have you solved this or still need help?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (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.