CODEWITHSUNDEEP
htmlcssinput
Sagar Gautam
Sagar Gautam

Reputation: 9389

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

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,

Upvotes: 0

Views: 2548

Answers (2)

Nitheesh
Nitheesh

Reputation: 20006

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>

Upvotes: 1

Bhargav Chudasama
Bhargav Chudasama

Reputation: 408

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>

Upvotes: 0

Related Questions