6

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

Hi all,

I currently have the following code. When you hover over the input box, there are 2 icons on the right hand of the box which you can toggle up and down to increase/decrease a value. I am unsure how to display the up and down buttons that increase/decrease values permenantly via CSS.

Any ideas.

Sammy Sung
  • 301
  • 1
  • 3
  • 15
  • when running your code, the two buttons are always there; I can see them permenantly. I'm using firefox – JavaQueen Jan 30 '17 at 11:01
  • it's the browser that styles them. Every browser renders it differently and you can't style them. It's like the required attribute; each browser define a style for the tooltip when leaving an input required empty – kiwi1342 Jan 30 '17 at 11:01
  • This is browser dependent, and unfortunately, hard or impossible to style in a consistent manner (like several other input controls). You might be better off trying to achieve this with a 3rd-party addon, e.g. jQuery UI spinner: https://jqueryui.com/spinner/ – Peter B Jan 30 '17 at 11:06

3 Answers3

0

You can achieve this using 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

Community
  • 1
  • 1
Super User
  • 9,448
  • 3
  • 31
  • 47
0

Target the spin buttons and set the Opacity to 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>

Set the min and max values according to your convenience.

StackUseR
  • 884
  • 1
  • 11
  • 40
-1

If you really want to have the arrow up and down permanently, you will need to build your own solution for that using Javascript and CSS.

There is already something similiar called HTML5 Number polyfill.

If you are already using jQuery or can use it, you should have a look at that.

Abhishek Pandey
  • 13,302
  • 8
  • 38
  • 68
Eddi
  • 782
  • 1
  • 7
  • 20