Topic: mdb-chip disable mode link focus
How to disable changing the background-color of mdb-chip when it is in focus?When hovering the cursor over the Chip, its background is changing, I looked in the mdb-chip API but I didn't find a solution.
When the mdb-chip gets focus, its background color changes.
<div class="col-6 col-md-6 pl-0 pr-0">
<nav class="my-4">
<ul class="pagination pagination-circle mb-0 flex-wrap align-justify-content-start">
<li mdbTooltip="Compra em Andamento ou Aguardando Prosseguimento do Lojista.">
<mdb-chip customClass="bg-lime">
<span class="text-chip text-white fw-bold"> Iniciado </span>
</mdb-chip>
</li>
If you'd like to change the chip background color, a clean and recommended way would be:
.bg-lime {
--mdb-chip-bg: #cddc39;
}
Alternatively, you can use !important on the background-color property — otherwise, more specific or nested styles (like :hover) might override it. Hope this helps!
allancmello pro premium commented an hour ago
Hi Kamila, you are correct!
The error when changing the background-color occurs in all components with custom colors without the declaration of "!important;" in the "background-color". The same thing happened in buttons with custom "background-color".
Declaring "!important;" solves the problem.
Thank you for your attention.
I was not able to recreate this issue based on the code you provided. Does it happen to you when you copy the default examples from the documentation, or only when you use custom colour classes?
allancmello pro premium commented 2 days ago
Hi Kamila,This happens using custom colors in customClass.I solved the problem by removing all hover/interaction effects in the scss.
mdb-chip { pointer-events: none;
.chip {
pointer-events: auto; // Allow events on internal content if needed
}
}
However, I believe that this should not be appropriate behavior for the component.The custom background does not have anything specific to cause this effect, as shown below.
.bg-lime { background-color: lime;}
I'm actually migrating the "ng-uikit-pro-standard-15.0.0" to "mdb-angular-ui-kit-7.1.0" and I noticed that a lot has changed. Many components and scss classes with fantastic effects and examples have simply disappeared. Which is giving me a lot of unnecessary extra work. It changed almost 100% from MDB version 4 to MDB version 5.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB Angular
- MDB Version: MDB5 7.1.0
- Device: All
- Browser: All
- OS: All
- Provided sample code: No
- Provided link: No