Topic: Focus-ring customization
Is there any way to change the focus-ring style (something like --bs-focus-ring-color/blur/etc.) when focusing on the checkbox input element?
You can overwrite the --mdb-box-shadow-color-rgb variable, but it only applies to the unchecked checkbox. If you would like to change the other styles, you simply need to overwrite them. This is what the default styles look like:
.form-check-input:checked:focus:before {
box-shadow: rgb(59, 113, 202) 0px 0px 0px 13px;
transform: scale(1);
transition: box-shadow 0.2s ease 0s, transform 0.2s ease 0s;
}
.form-check-input:focus::before {
opacity: 0.12;
box-shadow: 0px 0px 0px 13px rgba(var(--mdb-box-shadow-color-rgb, 0.6));
transform: scale(1);
transition: box-shadow 0.2s ease 0s, transform 0.2s ease 0s;
}
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB Standard
- MDB Version: MDB5 7.1.0
- Device: Laptop
- Browser: Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: No