change focus color to inputs and textareas in MDB5

Topic: change focus color to inputs and textareas in MDB5

Leandro Francisco free asked 1 year 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!

Add comment

Kamila Pieńkowska staff answered 1 year ago

0 0 Best answer

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 1 year 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?

Kamila Pieńkowska staff commented 1 year ago

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

Leandro Francisco free commented 1 year 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!

Kamila Pieńkowska staff commented 1 year ago

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

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

ForumUser: 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

Leandro Francisco

40Support score
5Questions 1Answers 0Snippets