Apply blur effect to parent container only-CodePudding

Goal: I want the background to blur when the user clicks on a form. So that the user attention is fully drawn to the form.

Problem: Unfortunately everything on the screen (parent div container and the form) is blurred.

Question: What do I have to do so that only the parent container blurs but not the box with the input field?

My code:

.container {
  width: 900px;
  margin: 0 auto;  
}

.box {
  padding: 40px 1px;
  margin: 0 auto;
  width: 500px;
  background: gray; 
  text-align:center;
}

.container:focus-within {
  filter: blur(4px);
}

<div >
  <p>some text again some text again some text again some text again some text again some text again some text again some text again some text again some text again some text again some text again some text again</p>
  <div >
    <div>
      <input >
      <input >
    </div>
  </div>
  <p>some text again some text again some text again some text again some text again some text again some text again some text again some text again some text again some text again some text again some text again</p>
  <input >
</div>

CodePudding user response：

Instead of blurring the whole container (which will always affect all descendants), you can blur direct children and define exceptions using the pseudo class :not(selector):

.container {
  width: 900px;
  margin: 0 auto;  
}

.box {
  padding: 40px 1px;
  margin: 0 auto;
  width: 500px;
  background: gray; 
  text-align:center;
}

.container:focus-within>*:not(.box, input) {
  filter: blur(4px);
}

<div >
  <p>some text again some text again some text again some text again some text again some text again some text again some text again some text again some text again some text again some text again some text again</p>
  <div >
    <div>
      <input >
      <input >
    </div>
  </div>
  <p>some text again some text again some text again some text again some text again some text again some text again some text again some text again some text again some text again some text again some text again</p>
  <input >
</div>