Home html Remove arrows from & lt; input type = “number” & gt;

Remove arrows from & lt; input type = “number” & gt;

Author

Date

Category

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;

photo

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 ();
});

Programmers, Start Your Engines!

Why spend time searching for the correct question and then entering your answer when you can find it in a second? That's what CompuTicket is all about! Here you'll find thousands of questions and answers from hundreds of computer languages.

Recent questions