HTML input box : numeric values only

Question

I have this HTML form with an input field. I want only numeric values to be inputted.

Problem is, when I hover the mouse over the input field, a scroll bar appears on the right. How to avoid this?

<html>

<body>
  <div class="form-group">
    <br/>
    <label class="control-label">Hours spent :</label>
    <input type="number" id="hours" name="hours" placeholder="Please input total number of hours spent on this job." class="form-control">
  </div>
</body>

</html>

Do you have to problems? or you only need the input to accept only numbers? — ElasticCode, Mar 27 '18 at 08:59
Possible duplicate of [Can I hide the HTML5 number input’s spin box?](https://stackoverflow.com/questions/3790935/can-i-hide-the-html5-number-input-s-spin-box) — , Mar 27 '18 at 09:43

score 1 · Answer 1 · answered Mar 27 '18 at 08:59

1

input[type='number'] {
    -moz-appearance:textfield;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

answered Mar 27 '18 at 08:59

Hendrik Duerkop

11
2

score 1 · Answer 2 · answered Mar 27 '18 at 09:38

I found this solution on thatstevensguy.com

input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
 
input[type="number"] {
    -moz-appearance: textfield;
}

<html>

<body>
  <div class="form-group">
    <br/>
    <label class="control-label">Hours spent :</label>
    <input type="number" id="hours" name="hours" placeholder="Please input total number of hours spent on this job." class="form-control">
  </div>
</body>

</html>

score 1 · Answer 3 · edited Mar 27 '18 at 12:21

1

See below

/* For Firefox */

input[type='number'] {
  -moz-appearance: textfield;
}


/* Webkit browsers like Safari and Chrome */

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

<html>

<body>
  <div class="form-group">
    <br/>
    <label class="control-label">Hours spent :</label>
    <input type="number" id="hours" name="hours" placeholder="Please input total number of hours spent on this job." class="form-control">
  </div>
</body>

</html>

edited Mar 27 '18 at 12:21

Muhammad Omer Aslam

22,976
9
42
68

answered Mar 27 '18 at 09:44

Deepshikha Chaudhary

338
3
11

3

Please provide an explanation. – wickywills Mar 27 '18 at 12:13

Honsa Stunna · Accepted Answer · 2018-03-27T09:49:35.613

0

You can remove them with CSS, assuming you mean the input spinners.

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

https://css-tricks.com/snippets/css/turn-off-number-input-spinners/

edited Mar 27 '18 at 09:49

answered Mar 27 '18 at 08:57

Honsa Stunna

577
2
8
24

HTML input box : numeric values only

4 Answers4