html5 - <input type="number"/> ?

问题描述

问 题

项目中因为添加了全局样式箭头被移除了

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button{
  -webkit-appearance: none !important;
  margin: 0;
}

但是在某个地方还需要这个箭头，在不改变全局样式的情况下，输入

#globalSetting .gS-wall-wrapper input::-webkit-inner-spin-button,
#globalSetting .gS-wall-wrapper input::-webkit-outer-spin-button{
  -webkit-appearance: normal !important;
}

但是却没有效果。是normal值不对吗，还是因为什么?

解决方案

-webkit-appearance的默认值不是normal

打开chrome的shadow dom，可以查看内部样式

如果你想影藏箭头，加一个visibility: hidden;属性即可，显示就用visibility: visible;

这篇关于html5 - <input type="number"/> ?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！