How to remove Input type="number" buttons

Asked

Viewed 5,004 times

5

How to remove both buttons from Input type="number" in HTML5? Example:

<p>Quero que isso:</p>
<input type="number">

<p>Vire isso porém sem usar o text, pois preciso do comportamento do number:</p>
<input type="text">

html css

  • See the response of our friend leo, I believe what you need is an input accepting only numbers. https://answall.com/questions/187172/input-somente-numeros-com-jquery

  • 2

    Possible duplicate of input only numbers with jquery

  • Duplicate is not, if I need to use type= "number" and not "text" is not duplicate, but I will read the question yes, maybe use it. Thank you

  • The duplicate is not defined by the question but by the answer. I believe that our friend Leo’s answer will meet your need.

  • Okay, solving the problem, it’s all right :D is that I didn’t want to use js, but okay, I’ll apply.

  • If you have some knowledge of English you can have a look at this link https://stackoverflow.com/questions/17999067/how-to-force-only-numbers-in-a-input-without-javascript see the answer

  • @BSALVO From what I understood it is not good to use the type for formatting/masking, I will do by JS same as in the question that was flagged.

Show 2 more comments

1 answer

10


Locking by css. 

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

input[type=number] {
    -moz-appearance:textfield;
}
<input type="number" onkeypress='return event.charCode >= 48 && event.charCode <= 57'></input>

Or you could make a text and validate accepting only numbers. As below:

<input type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57'>
</input>

  • But there is limitation, I can not delete the number.

  • I have another solution I will post. See if it solves?

  • Wow, here did not solve is it because I am in Firefox? Continue with the two buttons

  • So css always has limitations ... I will check in my firefox use Vivaldi and it works, tb tested in Chrome and it works.

  • Here in mine works correctly. It happens that for validations it is always good to use an LP that will fulfill its craft in any browser. However the usefulness of the answer is significant!

  • I added this css -Moz-Appearance:textfield; forehead then see if it solves.

  • Now it worked, 100%, and solved my problem, although I will use JS too.

  • Show leo, very good hugs...

  • It worked. Very good!

Show 4 more comments

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.