Adjust input field height of `VNumberInput` in vuetify

Question

I'm trying to adjust the height of the v-number-input or VNumberInput to 32px in vuetify. While some parts of the component seem to respond to my CSS, I'm unable to reduce the height of the entire component below 40px.

I've inspected the component and the html structure in my browser, and it seems like there are no additional margins or paddings preventing the height change. This is my current implementation code. I'm in vuetify 3.7.1.

My current attempt:

<template>
    <v-number-input
        v-model="lol"
        class="custom-height"
        color="primary"
        control-variant="split"
        variant="outlined"
        density="compact"
        width="120"
        hide-details
        single-line
        :rules="rules.integerOnly"
        :min="0"
    />
</template>

<style>
:root {
    --v-number-input-height: 32px;
}

/* The whole container */
.custom-height .v-input__control {
    height: var(--v-number-input-height);
    line-height: var(--v-number-input-height);
}

/* The decrement container */
.custom-height .v-field__prepend-inner {
    height: var(--v-number-input-height);
}

/* The FIELD container */
.custom-height .v-field__field {
    height: var(--v-number-input-height);
    padding: 0;
}

/* The increment container */
.custom-height .v-field__append-inner {
    height: var(--v-number-input-height);
}

/* The buttons */
.custom-height .v-number-input__control button {
    width: calc(var(--v-number-input-height) + 0.2px);
}

.custom-height input.v-field__input {
    height: var(--v-number-input-height) !important;
    background-color: blanchedalmond;
    padding: 0;
    box-sizing: border-box; 
}
</style>

The issue is:

• The input field is not in the center (as you can see in Image A below in column SP).

• The field height remains at 40px despite my attempts to reduce it to 32px.

• I can adjust the height above 40px, but not below (it's in my css).

.custom-height input.v-field__input {
    height: 32px !important;  /* It's changing if you set above 40 */
    padding: 0;
    background-color: blanchedalmond;
    box-sizing: border-box;  
}

Image A:

VNumberInput example problem

You can ignore the other VNumberInput in column SG and ORD because I haven't applied the custom-height class to them yet

Answer 1

This is probably the simplest way to achieve 32px height. I must note that density="compact" prop is also required.

.v-number-input * {
  --v-input-control-height: 32px;
  --v-input-padding-top: 0px;
  --v-field-input-padding-bottom: 0px;
  --v-field-padding-bottom: 0px;
}

Playground example