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版本号带来的改动 返回下一篇:没有了