HTML5去掉键入框type为number时的左右箭头的完成方

日期：2021-02-22 类型：科技新闻 

关键词：小程序制作流程，抽奖小程序，微信小程序怎么开店，小程序码生成，小程序模版

html5中，input type="number"时 右侧会有1个左右小箭头，详细介绍去掉这个箭头的方式，进行访问器的适配，网页页面实际效果的统1

1。公共性款式

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF⑻">
  <title>去掉键入框type为number时的左右箭头</title>
  <style>
   /*谷歌*/
   input::-webkit-outer-spin-button,
   input::-webkit-inner-spin-button {
    -webkit-appearance: none;
   }
   /*火狐*/
   input[type="number"] {
    -moz-appearance: textfield;
   }
  </style>
 </head>
 <body>
  <input type="number" ...>
 </body>
</html>

2。专用款式

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF⑻">
  <title>去掉键入框type为number时的左右箭头</title>
  <style>
   /*在谷歌下移除input[number]的左右箭头*/
   .inputNumber input[type='number']::-webkit-outer-spin-button,
   .inputNumber input[type='number']::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0;
   }
   /*在firefox下移除input[number]的左右箭头*/
   .inputNumber input[type="number"] {
    -moz-appearance: textfield;
   }
  </style>
 </head>
 <body>
  <input type="number" class="inputNumber" placeholder="请键入电話号码"> 1
 </body>
</html>

总结

以上所述是网编给大伙儿详细介绍的HTML5去掉键入框type为number时的左右箭头的完成方式，期待对大伙儿有一定的协助，假如大伙儿有任何疑惑请给我留言，网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用！
假如你感觉本文对你有协助，欢迎转载，烦请注明出处，感谢！

上一篇：详解HTML5.2版本号带来的改动 返回下一篇：没有了