Make HTML5 number input’s spin box always visible on chrome just like mozilla?

Question

Current behaviour on chrome is it's shown only when a user hovers over it:

By default, that spin box is not visible:

but in Mozilla, it's always visible:

How can I make spin box always visible in chrome?

https://jsfiddle.net/JerryGoyal/u4qoLcp4/

<input class="FlaggingPeriodTextBox" style=" width: 61px;    text-align: right;font-family: Segoe UI;margin-top: 9px;" type="number" min="1" max="999" value="7">

Answer 1

jsFiddle

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

<input class="FlaggingPeriodTextBox" style=" width: 61px;    text-align: right;font-family: Segoe UI;margin-top: 9px;" type="number" min="1" max="999" value="7">

--

Answer 2

The spins are always there, you just need to target the spins which in your case is inner spin button and set opacity to 1

input[type="number"]::-webkit-inner-spin-button 
{
   opacity: 1 !important;
}

Fiddle

Answer 3

And if you want there is other solution with jquery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script type="text/javascript">
   $(document).ready(function(){
    $( "#spinner" ).spinner();
   });


</script>
 <p>
<input id="spinner" name="value" />
</p>

but you need to include jqueryUI check here working example