NuxtN
Nuxt•2y ago
Gregor

ui.nuxt: Overwriting styles for UInput doesn't work

Hi, I want to remove the outline from an input, but I don't get it work. What I'm doing wrong?

 <UInput
      variant="outline"
      :ui="{
        rounded: 'rounded-none',
        base: 'h-full text-center [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none',
        variant: {
          outline: 'shadow-none ring-0',
        },
      }"
      type="number"
      :model-value="number"
    />


demo on https://stackblitz.com/edit/nuxt-ui-mtxuq3?file=app.vue

Many thanks,
gregor 😉
StackBlitzblackskull
Nuxt UI - Playground (forked) - StackBlitz
Playground of Nuxt UI, a UI library powered by Headless UI and Tailwind CSS for Nuxt.
Was this page helpful?