Nuxt•4mo ago

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"
    />

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

blackskull

StackBlitz

Nuxt UI - Playground (forked) - StackBlitz

Playground of Nuxt UI, a UI library powered by Headless UI and Tailwind CSS for Nuxt.

1 Reply

Gregor•4mo ago

Ok, I found out that I have to set a colour for it to work... but if I use the combination white/outline, it doesn't work either.

Gaming

Programming

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