All geek questions in one place

Remove the increase and decrease icon from the input field

I have an input as follows:

<input id="phone_area_code" maxlength="3" type="number" class="ember-view ember-text-field">

When rendering, it automatically adds the increase and decrease buttons, as shown below. And because of this, maxLength does not work (for example: if the input is 999 and I click the increment, it allows 1000)

enter image description here

I tried the following answer:

stack overflow

But it is useless. How to get rid of these buttons?

+4
source share
6 answers

Hidden in the comments in the post you linked is a suggestion to use an input type tel:

<input type="tel" value="111">

A few suggestions regarding the type number:

number min max .

<input min="1" max="10" type="number" value="1">

, , , Ember, , , :

{{input type="number" min="1" max="10"}}

:

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

input[type=number] {
  -moz-appearance: textfield;
}
<input type="number" min="1" max="10" value="1">

/ .

+3

:

<html>
<head>
<style>
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}
</style>
</head>
Hello <input type='number'>
</html>
+2

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

input[type=number] {
  -moz-appearance: textfield;
}
<input type="number" min="1" max="10" value="1">
+1

. , , , AngularJS.

, , .

, . input type="tel", .

0
source

add -webkit-appearance: none;by style of your input

0
source

DELETE INCRIMENT IMPROVED IN THE ENTRANCE FIELD NUMBER ADDING DIRECTIVE AND CSS

DIRECTIVE to disable functionality

.directive('input', function () {
    return {
        restrict: 'E',
        scope: {
            type: '@'
        },
        link: function (scope, element) {
            if (scope.type == 'number') {
                element.on('focus', function () {
                    angular.element(this).on('mousewheel', function (e) {
                        e.preventDefault();
                    });
                });
                element.on('blur', function () {
                    angular.element(this).off('mousewheel');
                });
            }
        }
    }
})

CSS to hide   -moz-appearance: text box;

-1
source

Source: https://habr.com/ru/post/1661267/

More articles:


All Articles