CSS backdrop effect - blur background of search bar-CodePudding

I'm trying to make the background of (only the search bar) to be a backdrop blur background, without blurring the whole background image behind it. Here's a screenshot of search bar Here's an example of what the background of the search bar should look like I've tried webkit filter: blur & filter: blur, but they both blur the whole body, and not just make the transparent background of the search bar blurred. Note: in the code below I'm not using a background image because I'll embed this code in an iframe, which the background before it will be an image.

<html>
<head>
    <base target="_blank">
    <base target="_blank">
    <script type="text/javascript">
        function submitSearch(){
              var siteSearchUrl = 'https://support.yssf.ml/_/search?query=';  // Replace with your site's search URL
              var query = document.getElementById("search-query-input").value;
              var url = siteSearchUrl   query
        if(typeof IE_fix != "undefined") // IE8 and lower fix to pass the http referer
        {
         var referLink = document.createElement("a");
         referLink.href = url;
         document.body.appendChild(referLink);
         referLink.click();
        }
        else { window.open(url,'_blank'); } // All other browsers
        }
        function searchKeyPress(e){
          // look for window.event in case event isn't passed in
          e = e || window.event;
          if (e.keyCode == 13)
          {
              document.getElementById('search-icon').click();
              return false;
          }
          return true;
        }
        
    </script>
    <link rel="stylesheet" type="text/css" href="https://ssl.gstatic.com/docs/script/css/add-ons.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
    <style>
        body {
        margin:0;
        padding:14px 6px 0 6px;
        background-color:transparent;
        font-family: 'Roboto', sans-serif;
        overflow:hidden;
        }
        #search-icon {
        margin: 4px 4px 4px 10px;
        padding:8px;
        height:24px;
        vertical-align:middle;
        cursor:pointer;
        }
        #search-icon:hover {
        background: rgba(155,153,176, 0.2);
        border-radius: 100px;
        }
        #search-query {
        background: inherit;
        }
        body:before {
        background: inherit;
        }
        #search-query:before {
        box-shadow: inset 0 0 2000px rgba(255, 255, 255, .5);
        filter: blur(10px);
        }
        #search-query {
        width:max-content;
        margin:0 auto;
        overflow:hidden;
        border:0;
        border-radius:14px;
        color: #212121;
        font-size:16px;
        line-height:24px;
        transition:0.4s;
        }
        #search-query:hover {
        color: #212121;
        box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
        font-size:16px;
        line-height:24px;
        }
        #search-query-input {
        width:60vw;
        height:24px;
        font-size:16px;
        font-stretch: normal;
        letter-spacing: normal;
        line-height:24px;
        border:0;
        color:#000;
        background-color:transparent;
        cursor:text;
        margin-left:-5px;
        text-align:start;
        vertical-align:middle;
        }
        @media (max-width:500px) {#search-query-input {width:80vw}}
        @media (min-width:900px) {#search-query-input {width:60vw}}
    </style>
</head>
<body>
    <!-- <input type="text" id="query" />
        <button id="search" onclick="submitSearch()">Search</button> -->
    <div id="search-query">
        <img id="search-icon" alt="Search" onclick="submitSearch();" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAQAAABIkb zAAADAklEQVR4AezZA6xcQRSA4b92g9q2/VRuw9puVLcxake13Zh1G9W2bds2T42ZzNPeO7Pb5H5/zD17PUMgEAgEAoFAIGxFGMRMlrGTi7zjFZfZwTJmMohCRLkajOMYkkRHGUdNolI8B5EUdpB4okpJViOpbDXFiArpGMcHJIzeMY50RFgB9iIe2ksBIiiGR4jHHhFDhHTlI JDH lKBMQmceY/YhZNqExBMn rAJUIMZMnCOY EItjxRP9OetoTQZMMtCadYixJ5TAoQyYH1cbiCE5CWxADB0jA85MNp7JHUipnsbTbwqO1OWL4RSIIzUSDKfgF riQBrOIFrPKENqleEZonWGNFjX0vDPNSUcTQ1HsiXWbUO0hhOu4YjWViwri2gdwYvDiFZ5rJqIaMXgRRyiNRGr7iBKa/BqDaJ0G4vKIVqN8Kqxy5OoL6L0mDR4lUZ/o2UA1sxHlBbhh8WI0jys2Y4odcUPXRCl7VhzDVFqgB8aIErXsUZ/fylr5dnyGGv0R38O/JADUfqMNfpLcHb8kF1/Mf/fT6HnWHMdUWqIHxoiSjexZiui1A0/dEWUtmHNPERpsZUH2WJ3rxKPSIdX6XiMKPXGmvKIVgivQohWJSx6YP11 g5WTUK04vAiBtGaBeDyJDqMF0cQrVpYthnRGkq4hiJau7GuhW/LKiHDskpzrEvDKV8WtkobFrZ24UQ9H5YW44xLi7VwZIpxcbcbKdXNuDUyG2cychQxtJ4YkhPPOsTQJXLiUMmwNjhasQUx9obyOBafzBZTiMoUIguZKUhlQszSRtYHaI5z pnsT6NxKI5HiMee8xlRGoJDhdiNeOg6ZWmNRHKEdIzlXZj7w/PIDYBEdgQoxmokla2nNL9J5EeAeI4iKWwPXfiXRMcIUJPxHEOS6CTDKYVuTGRH0BViEDNZyk4u8gpBeMMuJtKegujcj2DN1/bnmAgAEIBhIJIZGZHOWAEslPsoyCMgIHxPmAgICAjXIQRQSsh JSH7vYQ1StvZryW8vy9JkiQdHsFQT60Y7OcAAAAASUVORK5CYII=">
        <input type="text" id="search-query-input" placeholder="Search" enterkeyhint="go" onkeypress="return searchKeyPress(event);" style="box-shadow:none" ;="">
    </div>
</body>

CodePudding user response：

function submitSearch(){
      var siteSearchUrl = 'https://support.yssf.ml/_/search?query=';  // Replace with your site's search URL
      var query = document.getElementById("search-query-input").value;
      var url = siteSearchUrl   query
if(typeof IE_fix != "undefined") // IE8 and lower fix to pass the http referer
{
 var referLink = document.createElement("a");
 referLink.href = url;
 document.body.appendChild(referLink);
 referLink.click();
}
else { window.open(url,'_blank'); } // All other browsers
}
function searchKeyPress(e){
  // look for window.event in case event isn't passed in
  e = e || window.event;
  if (e.keyCode == 13)
  {
      document.getElementById('search-icon').click();
      return false;
  }
  return true;
}

body {
  margin:0;
  padding:14px 6px 0 6px;
  background-color:transparent;
  font-family: 'Roboto', sans-serif;
  overflow:hidden;
  background: url('https://images.pexels.com/photos/1563356/pexels-photo-1563356.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500');
  background-size:100vw;
  background-size:cover;
  background-repeat:no-repeat;
}
#search-query{
  background: transparent;
  width:max-content;
  margin:0 auto;
  overflow:hidden;
  border:0;
  border-radius:14px;
  color: #212121;
  font-size:16px;
  line-height:24px;
  transition:0.4s;
}
#search-query::before {
box-shadow: inset 0 0 2000px rgba(255, 255, 255, .5);
filter: blur(10px);
}
#search-query:hover {
  color: #212121;
  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 
              0 3px 1px -2px rgba(0,0,0,0.12), 
              0 1px 5px 0 rgba(0,0,0,0.2);
  font-size:16px;
  line-height:24px;
  backdrop-filter:blur(3px);
}
#search-query-input {
  width:60vw;
  height:24px;
  font-size:16px;
  font-stretch: normal;
  letter-spacing: normal;
  line-height:24px;
  border:0;
  color:#000;
  background-color:transparent;
  cursor:text;
  margin-left:-5px;
  text-align:start;
  vertical-align:middle;
}
#search-query-input:hover{
  color:white;
}
#search-icon {
  margin: 4px 4px 4px 10px;
  padding:8px;
  height:24px;
  vertical-align:middle;
  cursor:pointer;
}
#search-icon:hover {
  background: rgba(155,153,176, 0.2);
  border-radius: 100px;
}
#search-query-input:hover::placeholder{
  color:white;
}
@media (max-width:500px) {
  #search-query-input {
    width:80vw;
   }
}
@media (min-width:900px) {
  #search-query-input {
    width:60vw;
  }
}

<html>
<head>
    <base target="_blank">
    <base target="_blank">
    <link rel="stylesheet" type="text/css" href="https://ssl.gstatic.com/docs/script/css/add-ons.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
</head>
<body>
    <!-- <input type="text" id="query" />
        <button id="search" onclick="submitSearch()">Search</button> -->
    <div id="search-query">
        <img id="search-icon" alt="Search" onclick="submitSearch();" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAQAAABIkb zAAADAklEQVR4AezZA6xcQRSA4b92g9q2/VRuw9puVLcxake13Zh1G9W2bds2T42ZzNPeO7Pb5H5/zD17PUMgEAgEAoFAIGxFGMRMlrGTi7zjFZfZwTJmMohCRLkajOMYkkRHGUdNolI8B5EUdpB4okpJViOpbDXFiArpGMcHJIzeMY50RFgB9iIe2ksBIiiGR4jHHhFDhHTlI JDH lKBMQmceY/YhZNqExBMn rAJUIMZMnCOY EItjxRP9OetoTQZMMtCadYixJ5TAoQyYH1cbiCE5CWxADB0jA85MNp7JHUipnsbTbwqO1OWL4RSIIzUSDKfgF riQBrOIFrPKENqleEZonWGNFjX0vDPNSUcTQ1HsiXWbUO0hhOu4YjWViwri2gdwYvDiFZ5rJqIaMXgRRyiNRGr7iBKa/BqDaJ0G4vKIVqN8Kqxy5OoL6L0mDR4lUZ/o2UA1sxHlBbhh8WI0jys2Y4odcUPXRCl7VhzDVFqgB8aIErXsUZ/fylr5dnyGGv0R38O/JADUfqMNfpLcHb8kF1/Mf/fT6HnWHMdUWqIHxoiSjexZiui1A0/dEWUtmHNPERpsZUH2WJ3rxKPSIdX6XiMKPXGmvKIVgivQohWJSx6YP11 g5WTUK04vAiBtGaBeDyJDqMF0cQrVpYthnRGkq4hiJau7GuhW/LKiHDskpzrEvDKV8WtkobFrZ24UQ9H5YW44xLi7VwZIpxcbcbKdXNuDUyG2cychQxtJ4YkhPPOsTQJXLiUMmwNjhasQUx9obyOBafzBZTiMoUIguZKUhlQszSRtYHaI5z pnsT6NxKI5HiMee8xlRGoJDhdiNeOg6ZWmNRHKEdIzlXZj7w/PIDYBEdgQoxmokla2nNL9J5EeAeI4iKWwPXfiXRMcIUJPxHEOS6CTDKYVuTGRH0BViEDNZyk4u8gpBeMMuJtKegujcj2DN1/bnmAgAEIBhIJIZGZHOWAEslPsoyCMgIHxPmAgICAjXIQRQSsh JSH7vYQ1StvZryW8vy9JkiQdHsFQT60Y7OcAAAAASUVORK5CYII=">
        <input type="text" id="search-query-input" placeholder="Search" enterkeyhint="go" onkeypress="return searchKeyPress(event);" style="box-shadow:none" ;="">
    </div>
</body>

CodePudding user response：

Try linear-gradient....or radial gradient.

input {
      background: linear-gradient(32deg, rgba(255, 255, 255, 1) 0%, rgba(255, 231, 254, 1) 100%);
      border: 1px solid #eee;;
      padding: 6px 12px;
      border-radius: 12px;
    }

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" />

</head>

<body>

  <input placeholder="Search" />

</body>

</html>

CodePudding user response：

Use CSS filter on any page element. This may require you to duplicate the existing background into the #search-query Div (so that there is an image present to be blurred, it then appears like a blur of the original image behind it) but also try it with no background as a test. It's been a while since I used it but you may find that the blur applies to everything behind it regardless.

#search-query{
   filter: blur(10px);
}