There is input
of type number
and when you hover over it, the following arrows appear:
& lt; input type = "number" step = "1" min = "1" max = "27" id = " num_count "name =" quantity "value =" 1 "title =" Quantity " class = "input-text qty text" size = "4" & gt;
Is there any way to remove them?
1, authority 100%
input :: - webkit-outer-spin-button,
input :: - webkit-inner-spin-button {
/ * display: none; & lt; - Crashes Chrome on hover * /
-webkit-appearance: none;
margin: 0; / * & lt; - Apparently some margin are still there even though it's hidden * /
}
& lt; input type = "number" step = "1" min = "1" max = "27" id = "num_count" name = "quantity" value = "1" title = "Quantity" class = "input-text qty text" size = "4" / & gt;
2, authority 35%
I don’t see arrows in IE. The code below hides the control arrows in webkit-based browsers (Opera is not available for testing):
input :: - webkit-outer-spin-button,
input :: - webkit-inner-spin-button {
-webkit-appearance: none;
}
For Firefox, simpler:
input [type = 'number'] {
-moz-appearance: textfield;
}
3, authority 15%
These arrows are added by the browser itself, but they can be removed with regular css styles.
This is for the Chrome browser:
input [type = "number"] :: - webkit-outer-spin-button,
input [type = "number"] :: - webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
This is for the Firefox browser:
input [type = "number"] {
-moz-appearance: textfield;
}
input [type = "number"]: hover,
input [type = "number"]: focus {
-moz-appearance: number-input;
}
For others
input [type = number] :: - webkit-inner-spin-button,
input [type = number] :: - webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
4, authority 10%
English SO gives this answer – try adding this to .css:
input [type = number] :: - webkit-inner-spin-button,
input [type = number] :: - webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
5, authority 10%
Made a special plugin for this numberPlugin everything is written in Russian how to connect, it has been applied in more than one real site at github
Plugin for styling & lt; input type = "number" & gt;
and on the site http: // number -plugin.ru
To connect the plugin, add to & lt; head & gt;
& lt; script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/ jquery.min.js "& gt; & lt; / script & gt;
& lt; script src = "number_plugin / number_plugin.js" type = "text / javascript" & gt; & lt; / script & gt;
& lt; link href = "number_plugin / number_plugin.css" type = "text / css" rel = "stylesheet" & gt;
Create an element
& lt; input type = "number" class = "numb" id = "1" value = "1" & gt;
And include the script
$ (document) .ready (function () {
$ ('. numb'). number_plugin ();
});