CODEWITHSUNDEEP
html
Jacel
Jacel

Reputation: 347

HTML input box : numeric values only

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>

Upvotes: 1

Views: 180

Answers (4)

Deepshikha Chaudhary
Deepshikha Chaudhary

Reputation: 398

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>

Upvotes: 1

Honsa Stunna
Honsa Stunna

Reputation: 595

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/

Upvotes: 0

user9539919
user9539919

Reputation:

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>

Upvotes: 1

Hendrik Duerkop
Hendrik Duerkop

Reputation: 11

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

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

Upvotes: 1

Related Questions