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


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

JSONROY priority asked 2 years 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 commented 2 years 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 priority commented 2 years ago

That was the problem! Thank you.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

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