Topic: change focus color to inputs and textareas in MDB5
I'm trying to change focus color to inputs and textareas with something like this but it doesn't work, specially with textareas... I'm sure that has to be a better practice to reach it.
.form-control:focus ~ .form-notch div:first-child {
border-color: red !important;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(255, 0, 0, 0.6) !important; clip-path: inset(-8px 0px -8px -8px);
}
.form-control:focus ~ .form-notch div:nth-child(2) {
border-bottom-color: red !important;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(255, 0, 0, 0.6) !important; clip-path: inset(0px 0px -8px 0px);
}
.form-control:focus ~ .form-notch div:last-child {
border-color: red !important;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(255, 0, 0, 0.6) !important; clip-path: inset(-8px -8px -8px 0px);
}
.form-control:focus ~ .form-label {
color: red !important; /* para el texto sobre la linea
}
This is very near, but still shows a little shadow near the left border...
Thanks a lot for your help!
There was similar question in our support forum asked previously. https://mdbootstrap.com/support/standard/input-customize-colors/
Answer and code example should be helpful for you.
Leandro Francisco commented 2 years ago
Yes but it's not working properly (the line is showing behind the text), but this is for the inputs, the result is even worst in textareas.
Do you another suggestion?
kpienkowska staff commented 2 years ago
I've tried modifying your code.
https://mdbootstrap.com/snippets/standard/kpienkowska/4030547
I hope this is better.
Leandro Francisco commented 2 years ago
Excellent! Thank you a lot... this works perfectly for focus in.... now there's any way to avoid the color shadow of the "central" div when I focus out?
Thanks!
kpienkowska staff commented 2 years ago
Here is updated solution: https://mdbootstrap.com/snippets/standard/kpienkowska/4035950
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 4.1.0
- Device: Laptop PC
- Browser: Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: No