How to change the color of form field text?



  • How do you change the text-color of q-input label and hint text-color? class=“text-white” did not work.

    <div class="col-3 text-white">
        <h2>Giriş Yap</h2>
          <q-form
            class="q-gutter-md"
          >
            <q-input
              filled
              class="text-white"
              v-model="userinfo.email"
              label="Email *"
              hint="Email Adresiniz"
              lazy-rules
              :rules="[ val => val && val.length > 0 || 'Please type something']"
            />
    
            <q-input
              filled
              type="password"
              v-model="userinfo.password"
              label="Your email *"
              lazy-rules
              :rules="[ val => val && val.length > 0 || 'Please type something']"
            />
            <div>
              <q-btn label="Submit" type="submit" @click="loginUser" color="primary"/>
            </div>
          </q-form>
        </div>
    

    Thanks



  • @ytsejam You can use label-color="white" for the label, for the hint, you will probably need to use bottom-slots. So something like this:

    <q-input
      filled
      v-model="userinfo.email"
      label="Email *"
      label-color="white"
      lazy-rules
      :rules="[ val => val && val.length > 0 || 'Please type something']"
      bottom-slots
      >
      <template v-slot:hint>
        <div class="text-white">Email Adresiniz</div>
      </template>
    </q-input>
    

    Not positive how that works with an error message, but should get you on the right track.

    Edit: also if you just want white, are you sure you don’t just need the dark property instead?


Log in to reply