Adding number type input field with increment disabled using css not working

Question

I want an input field in html which will take number input only (including decimal) with increment disabled. I have used following :

/* Hide Spin arrows on input type number */

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-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 class="form-control" type="number" name="phone">

This works perfectly on Google Chrome with out any problem. But, It doesn't works on Firefox. Does anyone know where I am doing wrong ? Is there any other idea to get out of this problem ?

Thanks,

I don't get it, how will the css work if it targets input with type="number", but you are using an input with type="text"? — Carl Binalla
– Carl Binalla, Commented Jun 15, 2017 at 6:06
How can you select a text field with [type="number"] selector? — Abhishek Pandey
– Abhishek Pandey, Commented Jun 15, 2017 at 6:07

Nitheesh · Accepted Answer · 2017-06-15 06:55:10Z

1

Try using

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

However, using input type='number' will never assure that numeric inputs are given in your input in firefox. you have to write a custom validation function in case of firefox. This is an example.

<!DOCTYPE html>
<html>

<head>
    <style>
        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] {
            -moz-appearance:textfield; /*This is for firefox*/
        }
    </style>
    <script>
        //Custom number validating function
        function isNumber(evt) {
            var iKeyCode = (evt.which) ? evt.which : evt.keyCode
            if (iKeyCode != 46 && iKeyCode > 31 && (iKeyCode < 48 || iKeyCode > 57))
                return false;

            return true;
        } 
    </script>
</head>

<body>
    <input type="number" name="phone" onkeypress="javascript:return isNumber(event)">
</body>

</html>

edited Jun 15, 2017 at 6:55

answered Jun 15, 2017 at 6:42

Nitheesh

20.1k3 gold badges28 silver badges52 bronze badges

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

3 Comments

Sagar Gautam Over a year ago

Arrow icon not showing which is fine but it takes text as well and type number not woking

Sagar Gautam Over a year ago

I'm using laravel framework and there is error due to other issues. Your code works perfectly. Thank you so much

Nitheesh Over a year ago

You are Welcome.

Bhargav Chudasama · Accepted Answer · 2017-06-15 06:40:48Z

0

i dont no why its not working on your firebox browser because of version or any other reasion

this code perfectly work on my both browser firefox and crome

change input type text to number first

<input class="form-control" type="number" name="phone">

and your css code

<style type="text/css">
/* Hide Spin arrows on input type number */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-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;
}
</style>

answered Jun 15, 2017 at 6:40

Bhargav Chudasama

4086 silver badges11 bronze badges

Collectives™ on Stack Overflow

Adding number type input field with increment disabled using css not working

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related