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

I want to remove the arrows from my input field but I want to keep it scoped to only the text fields of this component.

<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

I’ve tried to use this solution from a somewhat similar problem: https://github.com/vuejs/vue-loader/issues/559#issuecomment-271491472

As well as this one: https://github.com/vuetifyjs/vuetify/issues/6157#issue-399264114

But they don’t really seem to function.

Answer

scoped styles are designed to affect only the component itself and no child components.

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.

Problem here is that <input> is not for sure root element of v-text-field

You can probably try to use deep selector mentioned in the linked issue but is there any reason to use scoped styles if the application of specific class is needed to trigger the behavior ?

Working codepen (without scoped stypes)

And here is how you can do it with scoped styles:

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