Customise arrow in .variant-option select

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;
}

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;
}

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

bangank36, you are a genius!

Thank you so much. That did exactly what I wanted it to.

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?

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?

I've just updated my previous for safari

Kindly try again and let me know how it works

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

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.

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

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!

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?

14 minutes ago, tuanphan said:

Have you solved this or still need help?

Hi @tuanphan - it has not been resolved. I've temporarily removed the code that @bangank36 gave me (because my site is live and I can't affect products at the moment). But I would love to get a fix if possible.