How to change input color on mdb-input value when filled and


Topic: How to change input color on mdb-input value when filled and in focus

JSONROY pro priority vip early access asked 2 months ago

** Problem **

I want to change the default color of the username and password when I fill something in. The labels are fine (white as defined), but the value entered are still not changing.

Expected behavior

Using the code below should change the default color of the input to use the white color (When in focus and not in focus)

Actual behavior

The username entered is still dark-grey (default color define for .form-control). and it is not overwriting the form-control class color.

Resources (screenshots, code snippets etc.)

                <mdb-input    
                  id="username_id"
                  v-model="username"
                  label="Username"
                  labelColor="white"
                  icon="user"
                  iconClass="my-icon-class"
                  required
                />

#username_id { color: white; }

#username_id:focus { color: white; }


Magdalena Dembna staff premium commented 2 months ago

I've recreated your issue - the problem is probably scoped attribute on the style tags. Create another one without and place you styling there. Let me know if it's working. Best regards, Magdalena


JSONROY pro priority vip early access commented 2 months ago

That was the problem! Thank you.


Please insert min. 20 characters.
Status

Resolved

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: Vue
  • MDB Version: 6.5.0
  • Device: Laptop
  • Browser: Chrome
  • OS: WIndows 10
  • Provided sample code: No
  • Provided link: No