Any way to style the input itself?

[simondrabble]

I use bootstrap and it's nice to be able to apply form-control class to each input. Is there a way to set the class on the input itself (not the vue-numeric-input wrapper) ?

[vanderb]

Hi @simondrabble,

I know question was made some month ago.

I've ending in same trouble, so I took a look into code. There is no style- or theme-property to solve that, so you have to override components styles by add custom-class to component.

<vue-numeric-input class="my-numeric-input" .../>

<style lang="scss">
// Use Class-Chain to get higher css-specificity
.vue-numeric-input {
 &.my-numeric-input {
  // Override styles
 }
}
</style>

For component styles take a look into the component-source
https://github.com/JayeshLab/vue-numeric-input/blob/master/src/vue-numeric-input.vue

You may also use CSS-property all to reset styles first before setting your custom css

<style lang="scss">
// Reset component-root styles
.vue-numeric-input {
  all: unset;
}

// Reset styles of child-elements
.vue-numeric-input * {
  all: unset;
}

 // Set custom style
.my-numeric-input {

}
</style>

Maybe the developer will implement such a theme, or style-feature or someone will create a pull-request for that.