Nuxt•2d ago

NuxtUI Input placeholder/italic

Hello 🙂 I use NuxtUI, I would like my inputs to have their placeholder in italic but not the entered text. Here is my app.config.ts :

        input: {
            placeholder: 'italic',
            base: 'not-italic',
            white: {
                outline: 'bg-transparent dark:bg-transparent',
            }
        },

        input: {
            placeholder: 'italic',
            base: 'not-italic',
            white: {
                outline: 'bg-transparent dark:bg-transparent',
            }
        },

Right now, it says in italic the whole time. I tried : - base: '!not-italic' -> The placeholder is not in italic either anymore - Adding not-italic in the white.outline -> No change, using important or not An idea ^^" ? Thanks

3 Replies

kapa.ai•2d ago

Hi @Omnislash. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the knowledge sources provided, I can offer some guidance on customizing the Input component in NuxtUI to achieve your desired styling. However, the specific configuration you're looking for is not directly addressed in the given information. Let me provide some suggestions based on the available documentation: 1. Custom CSS: Instead of trying to configure this solely through the app.config.ts, you might need to add some custom CSS to target the placeholder specifically. You can do this by adding a style block in your component or in a global CSS file:

::placeholder {
  font-style: italic;
}

input:not(:placeholder-shown) {
  font-style: normal;
}

::placeholder {
  font-style: italic;
}

input:not(:placeholder-shown) {
  font-style: normal;
}

2. Using the ui prop: The Input component allows for customization using the ui prop. You could try applying your styles this way:

<template>
  <UInput 
    placeholder="Your placeholder" 
    :ui="{ 
      base: 'not-italic', 
      placeholder: 'italic' 
    }"
  />
</template>

<template>
  <UInput 
    placeholder="Your placeholder" 
    :ui="{ 
      base: 'not-italic', 
      placeholder: 'italic' 
    }"
  />
</template>

3. Overriding in app.config.ts: If you want to keep trying with the app.config.ts approach, you might need to be more specific with your selectors. However, the exact structure for this is not clear from the provided knowledge sources. It's worth noting that the configuration you're attempting is quite specific and may not be directly supported through the default configuration options. The Input component documentation (https://ui.nuxt.com/components/input) doesn't explicitly mention a way to style the placeholder differently from the input text using only configuration. If these suggestions don't work, you might need to resort to more custom solutions or consider reaching out to the NuxtUI community or documentation for more specific guidance on this particular styling need. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2d ago

<@305772639438503936> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

OmnislashOP•2d ago

It's kind of the same but within the .vue instead. Just tried, doesn't work Can't really make a better selector afaik since it's what nuxtui gives me, but if someone could prove me wrong it would save my life XD

Gaming

Programming

NuxtUI Input placeholder/italic