css Quantity Arrows Customisation

Site URL: https://www.queenlashista.com/products

Hello, I have been trying to figure it out, on how to make my quantity arrows to be visible at all times and of course if possible to make them customised slightly also, but till now i cannot find a solution . 

Image Below shows quantity arrows appear when hover over with mouse. 

Image below is the usual view and no arrows are visible. 

any help appreciated - also customising css would great too. 

Best wishes all.

On 6/5/2021 at 1:27 PM, aravsanj said:

I am afraid this has to do with the browser than your code. You're using input tags to achieve the quantity input. This is the code you are using:

<input size="4" max="9999" min="1" value="1" type="number" step="1"></input>

The problem is, each browser is rendering the piece of code differently. I tried running this code in isolation on Chrome and it is only showing the arrows on hover. I ran the same code on firefox and the arrows are there by default. But when I visited your website via firefox, the arrows are not showing even on hover (weird, probably incompatible).

More nerdy explanation:
The arrows inside the input html element is a CSS pseudo-element. It is non-standard (till date) which is why different browsers are behaving differently. For custom CSS, you can target the pseudo-element using:

 ::-webkit-inner-spin-button

Solution:
The following CSS might potentially work but it is not guaranteed to behave appropriately for everyone all the time. I tested it myself and it is working in Chrome (desktop). You can add this to custom CSS.

<style>
input[type=number]::-webkit-inner-spin-button {
  Opacity: 1;
}
</style>

PS: Since this is a non-standard feature, browsers might act differently. The above code worked for me on latest Chrome (desktop). Once you added the CSS however, try visiting the page on firefox, firefox mobile, chrome mobile, safari, etc. Also keep on notice if it somehow becomes standardized in the future. The CSS might mess it up in such a case.
 

THank you for your help, it is absolutely the way you described. Working on desktop not mobile. 

Has anybody found a solution for this? The above solution doesn't work.
I would like for the quantity arrows to always show on the product page both on mobile and on desktop.

On 7/19/2023 at 5:54 AM, BUROM said:

Has anybody found a solution for this? The above solution doesn't work.
I would like for the quantity arrows to always show on the product page both on mobile and on desktop.

If you share link to this product, we can check easier

tuanphan Please see the link here for your consideration.  

https://pepetino.co/shop-old/p/spicy-native-chilli-evoo

On 8/8/2023 at 9:10 AM, BUROM said:

tuanphan Please see the link here for your consideration.  

https://pepetino.co/shop-old/p/spicy-native-chilli-evoo

Apologies, that URL has changed. Please use this link @tuanphan https://pepetino.co/product/p/native-chilli-olive-oil

On 8/10/2023 at 11:49 AM, BUROM said:

Apologies, that URL has changed. Please use this link @tuanphan https://pepetino.co/product/p/native-chilli-olive-oil

It already shows fine to me

Hi there - after further investigation the quantity arrows are linked to which browser you use. 

On Mobile us squarespace prompts the keyboard for the quantity selection which is odd. 

Thanks so much for your assistance.