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

Quantity Arrows Customisation


Oleg

Question

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. 1684291144_ScreenShot2021-06-05at09_01_42.thumb.png.7b2191647656114a466579c611914eca.png

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

692973379_ScreenShot2021-06-05at09_01_35.thumb.png.adacbbc3e2307cd02ca0273391abe7b9.png

 

 

any help appreciated - also customising css would great too. 

 

Best wishes all.

 

Link to comment
  • Answers 2
  • Created
  • Last Reply

Top Posters For This Question

2 answers to this question

Recommended Posts

  • 0

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.
 

humaneer

 

 

Sharing virtual tactics for an abstract world
Blogger @ humaneer.org

Link to comment
  • 0
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. 

 

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