在设置了input type=number类型自动带上下箭头,很难看,可通过以下css方式去掉number类型,去掉上下箭头。
先看下效果:
只要在css样式里面写以下样式即可:
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none !important; } input[type='number'] { -moz-appearance: textfield; }
ps:如果上面这个样式不生效,需要看下 style标签 是否添加了scoped,如果是,那么需要在进行样式穿透,即在样式代码块前添加 ::v-deep 或者 /deep/ 即可
/deep/ input::-webkit-outer-spin-button, /deep/ input::-webkit-inner-spin-button { -webkit-appearance: none !important; } /deep/ input[type='number'] { -moz-appearance: textfield; }
或者是这样:
::v-deep input::-webkit-outer-spin-button, ::v-deep input::-webkit-inner-spin-button { -webkit-appearance: none !important; } ::v-deep input[type="number"] { -moz-appearance: textfield; }
最终number类型去掉上下箭头效果图