Submenu up / down in the input field

Question

<span id = "referralValue">
  <input type="number" name="value" value="0.00">
</span>

Run codeHide result

Hello everybody,

I currently have the following code. When you hover over the input field, there are 2 icons on the right side of the window, which you can switch up and down to increase / decrease the value. I'm not sure how to display up and down buttons that increase / decrease permantly values ​​through CSS.

Any ideas.

Answer 1

You can achieve this using the following CSS (in Chrome):

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

for more information click here

Answer 2

Point the rotation buttons and set the parameter Opacityto 1.

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

<span id = "referralValue">
  <input type="number" name="value" value="0.00" min="" max="">
</span>

min max .

Answer 3

If you really want the up and down arrow constantly, you will need to create your own solution for this using Javascript and CSS.

There is already something similar to the HTML5 Number polyfill .

If you are already using jQuery or can use it, you should look at this.