Hello Paul
Please share the custom CSS code needed to use the” Glassmorphism b/g” feature on the Home Page Search Form.
background: rgba(0, 0, 0, 0.2);backdrop-filter: blur(5px);Can you use the browser script to both the outer and interior panels to produce the final output that resembles the screenshot below?
Change the separator line, text color, and pale drop down arrow as well.
P.S. The colors of the drop-down field are not necessary to be changed. I’m pleased with the bright b/g.
Thanks
You will need to be cautious because this area is governed by other plugin scripts and there are a lot of potential problems around. Additionally, the drop down arrows are pictures, and the colour of those images is typically not adjustable. There is a technique where filters are used, but line svgs can’t be changed in general, unlike this trick.
The next code should be close to what you want, provided I’ve understood the demands, but you’ll have to watch out for any consequences.
.home .lt-listing-search-form .search-form-content .search-form-fields,.home .lt-listing-search-form.style-2 .lt-search-wrap .search-form-fields,.lt-listing-search-form.style-2 .lt-search-wrap { background: transparent; color: #fff;}.home .select2-container .select2-selection .select2-selection__rendered .select2-selection__placeholder,.home .select2-container--default .select2-selection--single .select2-selection__rendered,.home .lt-listing-search-form .search-form-content .search-form-fields > div input::placeholder,.home .lt-listing-search-form .search-form-content .search-form-fields > div input { color: #fff;}.home .select2-container .select2-selection .select2-selection__arrow { filter: invert(100%) sepia(8%) saturate(3863%) hue-rotate(251deg) brightness(113%) contrast(105%);}Then it will seem like this:
It appears to be great.
However, the inner panel ( wht b/g ) is still visible.
Does the code be modified so that the inner panel blends in with the external panel?
There is a box-shadow that might make you think there is something, but I don’t see any other history colors it.
Include box-shadow: none to the concept I gave you in order to check if it matches what you see.
.home .lt-listing-search-form .search-form-content .search-form-fields,.home .lt-listing-search-form.style-2 .lt-search-wrap .search-form-fields,.lt-listing-search-form.style-2 .lt-search-wrap{ background:transparent; color:#fff; box-shadow:none;/* added */}