CODEWITHSUNDEEP
c#asp.netmodel-view-controller
Victor Zyon Tiangson
Victor Zyon Tiangson

Reputation: 230

Is there a way to remove the increase/decrease arrows in input type="number" for textboxfor?

Is there any way to remove these in input (type="number")? 

<input type="number" />

It's for the users to input their phone numbers.

this

Upvotes: 15

Views: 19143

Answers (4)

user28491573
user28491573

Reputation: 1

Just add @onkeydown:preventDefault to this input or to the parent HTML element if you alaredy using @onkeydown for input.

<input type="number" @onkeydown:preventDefault />

Upvotes: 0

Zsolt
Zsolt

Reputation: 11

This worked for me:

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

Thanks:)

Upvotes: 0

Oscar Jovanny
Oscar Jovanny

Reputation: 1137

Just these was enought for my code.

.input[type=number] {  
   &::-webkit-inner-spin-button{ display: none; }
   -moz-appearance:textfield;
}

Upvotes: 2

sanatsathyan
sanatsathyan

Reputation: 1763

This can be done through CSS if you wish,

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

Hope this helps!

Upvotes: 30

Related Questions