0

When the focus is in the text-area (Form) I want the body EXCEPT THAT FORM to blur.

React & Tailwind code:

<div className="sub-main-container">

<another component/>
<another component/>
<another component/>

<article id="form-message" className="contact-form container mx-auto text-white flex flex-col justify-center items-center m-4">
      <h3 className="font-bold text-3xl">Thanks for your visit!</h3>

      <form className="bg-white mx-6 w-full flex flex-col mt-2">
        <textarea
          id="textarea-form-message"
          className="p-2 text-black"
          placeholder="Let me your message! "
        />
        <button className="font-bold text-white bg-[#63b8ea] px-5 rounded-b-sm">
          Send me the messagge!
        </button>
      </form>
    </article>

<div>

Css code:

.sub-main-container:focus-within:not(#form-message) {
    filter: blur(0.5rem);
}

I'm using the pseudo-class :focus-within to blur the container and pseudo-class :not() to avoid that form but all the page is going blur.

Any idea what is happening?

TylerH
  • 20,799
  • 66
  • 75
  • 101
Marco Bertonati
  • 1

1 Answers1

0

Sadly, not in the simple way you're hoping.

A blur filter applies to descendants and cannot be reversed for the form itself.

One option might be to use a backdrop-filter, though it isn't supported in every browser.

tbjgolden
  • 1,115
  • 8
  • 9