CSS - Apply Backdrop Filter to Form Field

Question

I'm Using bootstrap. I need to apply a backdrop filter to this input field so the bg image appears blurred.

.input-group {
  background-image: url("https://images.unsplash.com/photo-1579492450119-80542d516179?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxleHBsb3JlLWZlZWR8OHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=400&q=60");
  color: black;
  backdrop-filter: blur(10px); /* What am I doing wrong ?? */
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.form-control {
  background-color: transparent;
  border-radius: 7px;
  padding-top: 25px;
  padding-bottom: 25px;
}

.input-group-prepend {
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div className="input-group" >
   <div className="input-group-prepend">
       <i className='far fa-search'></i>
   </div>
   <input type="text" className="form-control" placeholder="Search" />
</div>

According to me everything here is accurate however it still doesn't apply the filter.

Could someone help? Thanks

Answer 1

The filter works by blending the background, which is set on the .input-group. This means you need to apply the backdrop filter to the input (.form-control) instead the parent node (.input-group).

.input-group {
    background-image: url("https://images.unsplash.com/photo-1579492450119-80542d516179?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxleHBsb3JlLWZlZWR8OHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=400&q=60");
    color: black;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 50px;
}
    
.form-control {
  background-color: transparent;
  border-radius: 7px;
  padding-top: 25px;
  padding-bottom: 25px;
  backdrop-filter: blur(10px); /* <-------- Apply filter here */
}

I've added some padding to the .input-group to emphasise the effect.