Change placeholder color of mdb input


Topic: Change placeholder color of mdb input

Rogelio Sanchez asked 6 years ago

**Expected behavior** I want to be able to change the color of the placeholder in mdb input. **Actual behavior** I tried to change it through css but it's not working. **Resources (screenshots, code snippets etc.)** I tried this

 .md-form input::placeholder {
    color: white;
}

ALSO How is it that I'm a pro user but I don't have premium support? Quality Question Screenshot and when I clic to switch to vue version, it redirects to vue documentation. enter image description here


wodnikk answered 6 years ago

Hi there @Rogelio Sanchez,

You can try to style the text input placeholders' using

#yourinputid::placeholder {
    color: pink;
}

Remember to remove the scoped <style> tag attribute to be able to reach down to the input!

Best,


Mikołaj Smoleński staff answered 6 years ago

Hi Rogelio,

Your code is correct. I've just tested it. Maybe You have to remove scoped attribute from You style tag:

<style>
.md-form input::placeholder {
  color: red;
}
</style>

According to premium support - it's a different thing. While purchasing PRO package You're still PRO user. You can buy PREMIUM support additionaly if You want to, but in most cases we answer all of the Vue questions each working day.

Best regards


rtg pro premium priority commented 2 years ago

It's the input label (.form-outline .form-control.form-control-lg ~ .form-label text) which acts as the placeholder text in MDBInput though.. and that's what requires styling..

Also I think the use of :deep() would probably be preferable in most situations, instead of unscoping the whole component

Interested in your feedback though


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Vue
  • MDB Version: 5.1.1
  • Device: Mac
  • Browser: Google Chrome
  • OS: macOs High Sierra
  • Provided sample code: No
  • Provided link: No