The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS HTML5 Input Type – Number

  • This topic is empty.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
  • #45402

    Is there a way to remove the default style of the html5 input type=”number”? I want it to still validate by demanding that only numbers by typed in, but I don’t want the default style ‘up and down’ buttons at the extreme right. Codepen [here.]( “”)


    Am not looking for form validator. Read my post very well.


    I think what he is saying is that there is no real way to do what you want so you should be looking into using another input type and setting up validation for just numbers.


    You might try using a standard input with a ‘pattern’ attached.


    yes. i used pattern. like – patter=”[0-9]”
    But when i just entered 123 in the input field it refused. I even entered 0123456789, it kept saying – please match the requested format. I want people to be able to type in number and not text. Then i want then to have freedom to type any number in whatever way. Like: 919971951997 0r 2348034214407, etc.


    I again used this: pattern=”[+]d{3}[(]d{2}[)]d{4}[-]d{4}”
    But it will only accept a number like this: +233(80)2222-3333
    What of countries that have two digits code. Like: +91(90)2222-3333




    If you want any integer it’s as simple as “[0-9]+” or “d+”. The + means 1 or more occurrences, that’s why “[0-9]” doesn’t work, it means exactly 1 occurrence.

    If you don’t want it to start with a zero, “[1-9][0-9]*”.

    Jozsef K.

    There is a post about this here :

    Of course it works only in webkit engines, so the pattern attribute on input type text is a good option, or you could try input type tel

    If you would prefer a number only limit on keypress, here is my code:

    $(selector).keydown(function(evt) {
    var co=evt.keyCode
    if((co > 57 && co < 96) || co > 105) return false

    thank u


    >I want it to still validate by demanding that only numbers by typed in

    >I again used this: pattern=”[+]d{3}[(]d{2}[)]d{4}[-]d{4}”

    Are you trying to make an input for **numbers** or for **telephone** numbers? Don’t forget about `type=tel` if it’s the latter case – you’ll still need to use your pattern for validation, but it would solve the styling issue. AFAIK, no browser adds and particular styling to `tel` inputs.

    Speaking of the pattern, however, you might want to do it via javascript (in addition, of course, to server-side validation). There are many,many different phone number formats, as well as many,many acceptable ways to format them – to the point that making a regex match every possible acceptable value is impractical. Your current pattern forces users to follow a single, specific format, which can be very frustrating. (It also won’t accept a U.S. phone number, which follows the pattern `+1d{3}d{3}d{4}` (note the *single-digit* country code and the *3-digit* city(area) code, followed by 3 digits + four digits – all with optional formatting, of course).)

    Personally, I think the “best” approach to phone number validation is to simply *remove* all non-numeric characters from the string, and then check how many digits there are. You might also want to provide separate inputs for the country code / city code, to reduce potential confusion.

Viewing 12 posts - 1 through 12 (of 12 total)
  • The forum ‘CSS’ is closed to new topics and replies.