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

user_15353933 0
Viewed 3772

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.

tailwind-css vuetify.js vue.js typescript javascript
3 Answers

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

Vuetify v-text-field has this option called "hide-spin-buttons" that allows you to hide the up and down arrows when the input field is a number.

Click here to view the description of the Vuetify Option

1

<v-text-field 
    hide-details 
    outlined 
    dense 
    v-model="propVModel"
    type="number"
    hide-spin-buttons
    :prepend-inner-icon="showDollarSign ?  'mdi-currency-usd' : '' "
    :append-icon="showPercentSign && 'mdi-percent'"
    >
</v-text-field>
user_154745630

You can easily add hide-spin-buttons property to your component! See the documentation about this property.

user_134552580
Related