有没有办法从输入类型中删除箭头，但将其限制在特定组件范围内？

Question

我想从我的输入字段中删除箭头，但我想让它的范围仅限于该组件的文本字段。

<v-text-field
  class="inputPrice"
  type="number"
  v-model="$data._value"
  @change="sendValue"
  > 
</v-text-field>

<style scoped>

.inputPrice input[type='number'] {
    -moz-appearance:textfield;
}
.inputPrice input::-webkit-outer-spin-button,
.inputPrice input::-webkit-inner-spin-button {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;  
}

</style>

my text field

我尝试使用此解决方案来解决一个有点类似的问题：https://github.com/vuejs/vue-loader/issues/559#issuecomment-271491472

还有这个：https://github.com/vuetifyjs/vuetify/issues/6157#issue-399264114

但它们似乎并没有真正发挥作用。

Answer 1

scoped 样式旨在仅影响组件本身而不影响子组件。

Docs

With scoped, the parent component's styles will not leak into child components. However, a child component's root node will be affected by both the parent's scoped CSS and the child's scoped CSS. This is by design so that the parent can style the child root element for layout purposes.

这里的问题是 <input> 不确定 v-text-field

的根元素

您或许可以尝试使用链接问题中提到的深层选择器，但如果需要应用特定 class 来触发行为，是否有任何理由使用范围样式？

Working codepen（没有 scoped 类型）

下面是使用范围样式的方法：

<style scoped>
.inputPrice >>> input[type="number"] {
  -moz-appearance: textfield;
}
.inputPrice >>> input::-webkit-outer-spin-button,
.inputPrice >>> input::-webkit-inner-spin-button {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
</style>

有没有办法从输入类型中删除箭头，但将其限制在特定组件范围内？

Is there a way to remove the arrows from an input type but keeping it scoped to only a specific component?

javascript

typescript

vue.js

vuetify.js

tailwind-css