How to apply a CSS blur filter to a background (not image)

Question

I got autocomplete dropdown filled with almost solid background colour

.Suggestions {
  text-align: left;
  position: absolute;
  border: 1px solid #ddd;
  border-radius: 5px;
  background-color: rgba(235, 235, 235, 0.95);
  list-style: none;
  margin-top: -9px;
  max-height: 143px;
  overflow-y: auto;
  padding-left: 0;
  width: 406px;
}

covering other elements (buttons, inputs ...) when activated

DEACTIVATED

ACTIVATED

and I would like to make an effect similar to safari dropdown when clicked on url where everything behind is almost visible and also blurred.

Is there any way to do that in css? I know that I can create an image and then apply blur filter but the autocomplete is used in many screens with different background so creating image for each screen would be a mammoth task

Answer 1

This question speaks to blur Can you blur the content beneath/behind a div? There is also opacity going on there as well, here are some ugly things to demonstrate that.

This is somewhat difficult to answer as it does depend on your markup a bit - and CSS pure vs some JavaScript are in some cases very different. here are some things.

.my-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: .4em;
  background: rgba(235, 235, 235, 0.8);
  border: none;
  border-radius: 0.5em;
  padding: 1em 2em 1em 1em;
  font-size: 1em;
}


/* the triagle arrow */

.select-container {
  position: relative;
  display: inline;
}


/* the triagle arrow */

.select-container:after {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  pointer-events: none;
}


/* the triagle arrow */

.select-container:after {
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  top: .3em;
  right: .75em;
  border-top: 8px solid black;
  opacity: 0.5;
}

.my-select::-ms-expand {
  display: none;
}

.my-select:focus {
  outline: none;
  border-radius: 0.5em;
}

select.my-select * {
  background: rgba(235, 235, 235, 0.8);
  opacity: 0.8;
  color: lightorange;
}

select.my-select * {
  background-color: #bbeeee;
  color: #226666;
  opacity: 8;
}

select.my-select *:focus {
  background: rgba(235, 135, 100, 0.5);
  opacity: 0.8;
}

.list-container>.my-list:hover {
  opacity: 0.6;
}

.list-container .my-list li:hover {
  color: lime;
  );
}

.something {
  font-size: 2em;
  position: relative;
  top: -0.7em;
  z-index: -2
}

.my-list {
  padding-top: 0.4em;
  background: rgba(240, 240, 200, 0.9);
  border: none;
  border-radius: 0.5em;
  padding: 1em 1.5em 1em 1em;
  font-size: 1.4em;
  border: solid 0.25px green;
}

.my-list li {
  color: #227777;
  list-style-type: square;
}

.other {
  color: red;
  font-size: 2em;
  background-color: lightblue;
  position: relative;
  top: -2.5em;
  left: 1px;
  height: 3em;
  z-index: -1;
}

.test-backdrop-container {
  height: 10em;
  border: 1px dotted red;
  font-size: 2em;
  position: relative;
}

.test-backdrop {
  position: relative;
  size: 1.5em;
  top: 0.75em;
  left: 0.75em;
  border: solid blue 1px;
  background-color: #dddddd;
}

.test-backdrop {
  -webkit-backdrop-filter: blur(10px);
  opacity: 0.8;
}

<div class="select-container">
  <select class="my-select">
    <option>one wider text</option>
    <option>two</option>
    <option>eagle</option>
    <option>canary</option>
    <option>crow</option>
    <option>emu</option>
  </select>
</div>
<div class="something">something here</div>
<div class="list-container">
  <ul class="my-list">
    <li>one wider text</li>
    <li>two</li>
    <li>eagle</li>
    <li>canary</li>
    <li>crow</li>
    <li>emu</li>
  </ul>
</div>
<div class="other">Tester out
  <input class="other-input" type="text" value="something in textbox" /> More is not more but not less
</div>
<div class="test-backdrop-container">Test Container
  <div class="test-backdrop">Test Backdrop</div>
  more text in container more test text
</div>

Answer 2

  function myFunction() {
    var Textfield  = document.getElementById("Textfield");
   
    if (Textfield.value == "")
      document.getElementById("back_div").classList.remove("blur");
    else
      document.getElementById("back_div").classList.add("blur");

  }

 .blur {
      /* Add the blur effect */
      filter: blur(2.5px);
      -webkit-filter: blur(2.5px);
    }

  <input id="Textfield" onkeyup="myFunction()" type="text">
  <div id="back_div">test text</div>