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

Posted 2023-03-06

【中文标题】有没有办法从输入类型中删除箭头，但将其范围仅限于特定组件？

【英文标题】：Is there a way to remove the arrows from an input type but keeping it scoped to only a specific component?

【发布时间】：2021-06-06 09:56:51

【问题描述】：

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

<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

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

【参考方案1】：

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

Docs

使用scoped，父组件的样式不会泄漏到子组件中。但是，子组件的根节点会同时受到父级的作用域 CSS 和子级的作用域 CSS 的影响。这是设计使然，以便父级可以为子根元素设置样式以进行布局。

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

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

Working codepen（没有scoped stypes）

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

<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>