[Richard Thomason]

I've had no luck in locating the CSS selector for the spinner control in the Qty text box in the Shopping Bag. I tried adding "Display: Block;" in the input.ecwid-productBrowser-cart-qqtyTextField selector, but not it. Would prefer the up/down arrows always display to prevent confusion for "some" customers. Appreciate any help.

Richard

[Rick G]

Originally Posted by Richard Thomason

I've had no luck in locating the CSS selector for the spinner control in the Qty text box in the Shopping Bag. I tried adding "Display: Block;" in the input.ecwid-productBrowser-cart-qqtyTextField selector, but not it. Would prefer the up/down arrows always display to prevent confusion for "some" customers. Appreciate any help.

Richard

Hi Richard,

I checked this input in several browsers and I see that it's hidden in Chrome only. In Firefox and Safari, it displays at all times.

So to make it display at all times in Chrome, you can add this code to Custom CSS Themes:

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {  
   opacity: 1;
}

Thank you.

[Richard Thomason]

Thanks for that. My bad for not thinking about that.

[Richard Thomason]

Actually, took a look at IE (ver. 11.0.9600.17905) and with or without the code added, there are no spinner controls showing at all. That code does work for Chrome however. There does not appear to be any updates not already installed for IE, so unsure what else to check.

[Rick G]

Originally Posted by Richard Thomason

Actually, took a look at IE (ver. 11.0.9600.17905) and with or without the code added, there are no spinner controls showing at all. That code does work for Chrome however. There does not appear to be any updates not already installed for IE, so unsure what else to check.

The code that I provided was meant exclusively for Chrome, the prefix -webkit applies to Chrome browser only, as far as I know.

I did a little research and it turns out that the number field behaves differently in different browsers. In IE for example, there are no such controls on how to increase or decrease the number value, so this field behaves just like a usual text input. In Firefox the controls display all the time, whether on hover or not, and in Chrome the controls appear on hover.

So I provided a code so that the controls display at all times for Chrome browser. As I can see, there is no way to add controls for the number input using CSS, but possibly you will be able to do something using custom programming and Ecwid Javascript API: http://help.ecwid.com/customer/porta...javascript-api

You can find out move about this here: https://css-tricks.com/numeric-input...wser-defaults/
Thank you.

[Richard Thomason]

Thanks for looking into it further. I am seeing the same after using IE to test with. Been using Chrome for checking my work up to this point, so learning the lesson that I should be checking in multiple browsers. Don't like the fact it behaves differently in each though. Interesting.