Topic: change focus color to inputs and textareas in MDB5

Leandro Francisco free asked 6 months ago


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!


kpienkowska staff answered 6 months ago


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 free commented 6 months 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 6 months ago

I've tried modifying your code. https://mdbootstrap.com/snippets/standard/kpienkowska/4030547
I hope this is better.


Leandro Francisco free commented 6 months 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 6 months ago

Here is updated solution: https://mdbootstrap.com/snippets/standard/kpienkowska/4035950



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 Standard
  • MDB Version: MDB5 4.1.0
  • Device: Laptop PC
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No