Vuetify: [Feature Request] Remove spin-button for v-text-field type number

[BestLice]

Problem to solve

If you add the "type = 'number'" Parameter to your v-text-field there are always spin-buttons, which destroy the beautiful vuetify-page. (IMHO)

A lot people need this feature and it's way better using a parameter (or whatever) then always modifying the CSS-Sheet.

Proposed solution

There is a way using CSS:
https://codepen.io/paulpv/pen/mxzwoq

(It's not my codepen, it's one of the first I found when i googled for the feature)

[chaule97]

Thank you

[vinicius182]

Any updates about this feature request?

[azurramas]

Any updates about this feature request?

I couldn't find any updates, but weirdly only this worked for me

.v-input .v-input__control .v-input__slot .v-text-field__slot input::-webkit-outer-spin-button,
.v-input .v-input__control .v-input__slot .v-text-field__slot input::-webkit-inner-spin-button
{
-webkit-appearance: none;
margin: 0;
}

If your v-input has a custom class, you can use it instead of using ".v-input" class in the CSS.

[jarvilito1234]

this works fine

::v-deep input::-webkit-outer-spin-button,
::v-deep input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}

[BaptisteCool]

I think it could be good with just a prop like 'hide-arrow' or 'show-arrow'

[kp2356]

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}

/* Firefox */
input[type=number] {
-moz-appearance: textfield;
}