<input type="number"/> ?

Question

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

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值不对吗，还是因为什么?

Answer 1

-webkit-appearance的默认值不是normal

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

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