I am trying to display div.search-backdrop when a visitor puts the cursor in search field #Search-In-Modal-1 using input:focus, but I am having a really hard time writing the proper css selector for this. I sometimes get confused by using +, > or ~ but I thought it should work like this...
Code snippet from Shopify:
<div class="search-modal__container">
<predictive-search class="search-modal__form" data-loading-text="Loading...">
<form action="/en/search" method="get" role="search" class="search search-modal__form">
<div class="field">
<input class="search__input field__input" id="Search-In-Modal-1" type="search" name="q" value="" placeholder="Search" role="combobox" aria-expanded="false" aria-owns="predictive-search-results-list" aria-controls="predictive-search-results-list" aria-haspopup="listbox" aria-autocomplete="list" autocorrect="off" autocomplete="off" autocapitalize="off" spellcheck="false">
<label class="field__label" for="Search-In-Modal-1">Search</label>
<input type="hidden" name="options[prefix]" value="last">
<button class="search__button field__button" aria-label="Search">
<!--<svg class="icon icon-search" aria-hidden="true" focusable="false" role="presentation">
<use href="#icon-search">
</svg>-->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" class="icon icon-search">
<path d="M22.938 13.382c-0.036 5.247-4.318 9.472-9.565 9.437s-9.472-4.318-9.436-9.565c0.035-5.223 4.28-9.438 9.503-9.437 5.263 0.023 9.513 4.302 9.501 9.565h-0.003zM26.881 13.382c-0.032-7.423-6.075-13.414-13.498-13.382s-13.414 6.075-13.382 13.497c0.031 7.4 6.039 13.382 13.44 13.382 7.435-0.025 13.447-6.062 13.44-13.498z"></path>
<path d="M29.216 31.882l-8.499-8.451 2.784-2.787 8.499 8.451-2.784 2.787z"></path>
</svg>
</button>
</div>
<div class="predictive-search predictive-search--header" tabindex="-1" data-predictive-search>
<div class="predictive-search__loading-state">
<svg aria-hidden="true" focusable="false" role="presentation" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
<circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
</svg>
</div>
</div>
<span class="predictive-search-status visually-hidden" role="status" aria-hidden="true"></span>
</form>
</predictive-search>
</div>
<div class="search-backdrop"></div>
The CSS I have tried:
div.search-backdrop {
position: absolute;
width: 100%;
height: 100vh;
background-color: rgba(var(--color-foreground),.2);
backdrop-filter: blur(2px);
z-index: 1;
top: 0px;
left: 0px;
display: none;
}
input#Search-In-Modal-1:focus ~ #shopify-section-header > sticky-header > header.header.header--top-left.page-width.header--has-menu > div.search-backdrop {
display: block;
}
Please can somebody enlighten me why it is not working?
I have gotten the CSS selector path from the browser developer-menu, hoping it would be easy as that, but I am probably missing something crucial...
This should work:
div.search-backdrop {
position: absolute;
width: 100%;
height: 100vh;
background-color: rgba(var(--color-foreground),.2);
backdrop-filter: blur(2px);
z-index: 1;
top: 0px;
left: 0px;
display: none;
}
.search-modal__container:has(#Search-In-Modal-1:focus-visible) + .search-backdrop {
display: block;
}<div class="search-modal__container">
<predictive-search class="search-modal__form" data-loading-text="Loading...">
<form action="/en/search" method="get" role="search" class="search search-modal__form">
<div class="field">
<input class="search__input field__input" id="Search-In-Modal-1" type="search" name="q" value="" placeholder="Search" role="combobox" aria-expanded="false" aria-owns="predictive-search-results-list" aria-controls="predictive-search-results-list" aria-haspopup="listbox" aria-autocomplete="list" autocorrect="off" autocomplete="off" autocapitalize="off" spellcheck="false">
<label class="field__label" for="Search-In-Modal-1">Search</label>
<input type="hidden" name="options[prefix]" value="last">
<button class="search__button field__button" aria-label="Search">
<!--<svg class="icon icon-search" aria-hidden="true" focusable="false" role="presentation">
<use href="#icon-search">
</svg>-->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" class="icon icon-search">
<path d="M22.938 13.382c-0.036 5.247-4.318 9.472-9.565 9.437s-9.472-4.318-9.436-9.565c0.035-5.223 4.28-9.438 9.503-9.437 5.263 0.023 9.513 4.302 9.501 9.565h-0.003zM26.881 13.382c-0.032-7.423-6.075-13.414-13.498-13.382s-13.414 6.075-13.382 13.497c0.031 7.4 6.039 13.382 13.44 13.382 7.435-0.025 13.447-6.062 13.44-13.498z"></path>
<path d="M29.216 31.882l-8.499-8.451 2.784-2.787 8.499 8.451-2.784 2.787z"></path>
</svg>
</button>
</div>
<div class="predictive-search predictive-search--header" tabindex="-1" data-predictive-search>
<div class="predictive-search__loading-state">
<svg aria-hidden="true" focusable="false" role="presentation" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
<circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
</svg>
</div>
</div>
<span class="predictive-search-status visually-hidden" role="status" aria-hidden="true"></span>
</form>
</predictive-search>
</div>
<div class="search-backdrop"></div>