0

Here is my code in input.tsx

<input type="text" placeholder="Email" class="h-12 px-4 w-full h-12 px-4 placeholder-gray-500 border border-transparent rounded outline-none transition duration-200 text-gray-900 bg-gray-f7 hover:border-gray-400 focus:border-black focus:placeholder-gray-900 mb-10px bg-gray-100   " id="emailAddress" autocomplete="off" name="emailAddress" value="">

"onFocus" blue outline is coming on my UAT (not in localhost); i.e:

    input[type=text]:focus {
    outline: 2px solid #2d8cff !important;
    outline-offset: 1px !important;
}

I have overrided this CSS with outline:none !important; but CSS is not appearing on UAT server.

Kleber Germano
  • 702
  • 3
  • 10
  • 25
Ranjith Nayak
  • 1
  • the overrided css in app.css is...........input[type=text]:focus { outline: 0 !important; outline-offset: 0 !important; } – Ranjith Nayak Sep 03 '22 at 18:03
  • Try setting outline, border, and box-shadow all to 0/none, if that doesn't work, when you scroll down in the styles debug menu, do you see anything else when you force the `:focus` element state from the right-hand menu? – Joshua Terrill Sep 04 '22 at 22:04

1 Answers1

0

Check the css specificity https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

There might be some other parent element which is causing this.

Removing outline

  1. How to remove focus border (outline) around text/input boxes? (Chrome)
  2. How to remove the border highlight on an input text element
Ashish Singh Rawat
  • 1,419
  • 16
  • 30