Apply blur effect to parent container only

user_14807111 0
Viewed 165

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 class="container">
  <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 class="box">
    <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>

css
1 Answers

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 class="container">
  <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 class="box">
    <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>

user_37443040
Related