The implementation of removing the up and down arrows when the input field type is number in HTML5

Time:2020-5-10

In HTML5,input type="number"There will be a small up and down arrow on the right side. It introduces the method of removing the arrow to complete browser compatibility and page effect unification

One. Public style

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  < title > remove the up and down arrows when the input field type is number < / Title >
  <style>
   /*Google*/
   input::-webkit-outer-spin-button,
   input::-webkit-inner-spin-button {
    -webkit-appearance: none;
   }
   /*Firefox*/
   input[type="number"] {
    -moz-appearance: textfield;
   }
  </style>
 </head>
 <body>
  <input type="number" ...>
 </body>
</html>

Two. Private style

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  < title > remove the up and down arrows when the input field type is number < / Title >
  <style>
   /*Remove the up and down arrows of input [number] under Google*/
   .inputNumber input[type='number']::-webkit-outer-spin-button,
   .inputNumber input[type='number']::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0;
   }
   /*Remove the up and down arrows of input [number] under Firefox*/
   .inputNumber input[type="number"] {
    -moz-appearance: textfield;
   }
  </style>
 </head>
 <body>
  < input type = "number" class = "inputnumber" placeholder = "please enter phone number" > 1
 </body>
</html>

summary

The above is the implementation method of removing the up and down arrows when the input field type is number in HTML5 introduced by Xiaobian to you. I hope it can help you. If you have any questions, please leave a message to me and Xiaobian will reply to you in time. Thank you very much for your support of the developepaer website!
If you think this article is helpful to you, welcome to reprint, please indicate the source, thank you!

Recommended Today

The road of high salary, a more complete summary of MySQL high performance optimization in history

preface MySQL for many linux practitioners, is a very difficult problem, most of the cases are because of the database problems and processing ideas are not clear. Before the optimization of MySQL, we must understand the query process of MySQL. In fact, a lot of query optimization work is to follow some principles so that […]