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
– ElasticCode, Commented Mar 27, 2018 at 8:59
Possible duplicate of Can I hide the HTML5 number input’s spin box? — user9539919
– user9539919, Commented Mar 27, 2018 at 9:43

Hendrik Duerkop · Accepted Answer · 2018-03-27 08:59:40Z

1

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

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

answered Mar 27, 2018 at 8:59

Hendrik Duerkop

112 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user9539919 · Accepted Answer · 2018-03-27 09:38:27Z

1

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>

answered Mar 27, 2018 at 9:38

user9539919

Comments

Muhammad Omer Aslam · Accepted Answer · 2018-03-27 12:21:47Z

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, 2018 at 12:21

Muhammad Omer Aslam

23.9k9 gold badges47 silver badges69 bronze badges

answered Mar 27, 2018 at 9:44

Deepshikha Chaudhary

4084 silver badges11 bronze badges

1 Comment

wickywills Over a year ago

Please provide an explanation.

Honsa Stunna · Accepted Answer · 2018-03-27 09:49:35Z

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, 2018 at 9:49

answered Mar 27, 2018 at 8:57

Honsa Stunna

5952 gold badges9 silver badges26 bronze badges

Collectives™ on Stack Overflow

HTML input box : numeric values only

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related