如何仅在指定Vue组件内去除number类型v-text-field的输入箭头

原有写法不生效的原因 #

• Vue scoped样式编译时，会给当前组件内所有元素附加带唯一标识的data-v-*属性，实现组件间的样式隔离
• 你给<v-text-field>添加的inputPrice类名，最终会绑定在Vuetify组件的最外层包裹节点上；组件内部真正渲染的原生input节点属于Vuetify自身的子组件内容，不会携带当前组件的data-v-*标记
• 原来的选择器经过scoped编译后，会被自动补上data-v-*的匹配条件，根本无法命中Vuetify内部的input元素及对应伪元素，样式自然不生效。

直接可用的调整方案 #

模板代码完全不需要改动，只需要调整scoped样式的选择器写法，使用Vue提供的深度选择器:deep()穿透组件边界，同时通过类名严格锁定作用范围，保证样式不影响全局其他输入框：

<style scoped>
/* Firefox 浏览器适配 */
.inputPrice :deep(input[type='number']) {
  -moz-appearance: textfield;
}

/* Chrome、Edge 等Webkit内核浏览器适配 */
.inputPrice :deep(input::-webkit-outer-spin-button),
.inputPrice :deep(input::-webkit-inner-spin-button) {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin: 0;
}
</style>

方案可控性说明 #

• 不会产生全局样式污染：所有规则都前置增加了.inputPrice类名匹配条件，哪怕穿透到Vuetify组件内部，也只会作用在当前绑定了该类名的输入框上，页面其他位置的number输入框完全不受影响
• 依然保留scoped样式的隔离能力：写在scoped块内的样式，外层的.inputPrice选择器还是会被附加当前组件的scoped标识，样式不会溢出到其他组件中。

常见踩坑提醒 #

• 绝对不要编写不限定类名范围的深度选择器，比如直接写:deep(input[type='number']) { ... }，这类写法会让项目内所有number输入框的箭头都被去除，违背仅修改当前组件输入框的需求
• 不要为了临时生效就把样式移到不带scoped的全局样式块中，后期很容易和其他页面的输入框样式产生覆盖、冲突问题。

内容的提问来源于stack exchange，提问作者Aristeus