2023年6月29日 23:01:30go评论91阅读模式

英文:

Focus on input to display backdrop div with CSS selector

问题

我正在尝试在访客将光标放在搜索字段 #Search-In-Modal-1 中时，使用 input:focus 显示 div.search-backdrop，但我在编写正确的 CSS 选择器方面遇到了很大困难。我有时会混淆使用 +、> 或 ~，但我认为应该像这样工作...

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 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>

我尝试过的 CSS：

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;
}

请问有人可以告诉我为什么它不起作用吗？

我从浏览器开发者菜单中获取了 CSS 选择器路径，希望它会像这样简单，但我可能漏掉了一些关键点...

英文:

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:

                &lt;div class=&quot;search-modal__container&quot;&gt;
&lt;predictive-search class=&quot;search-modal__form&quot; data-loading-text=&quot;Loading...&quot;&gt;
&lt;form action=&quot;/en/search&quot; method=&quot;get&quot; role=&quot;search&quot; class=&quot;search search-modal__form&quot;&gt;
&lt;div class=&quot;field&quot;&gt;
&lt;input class=&quot;search__input field__input&quot; id=&quot;Search-In-Modal-1&quot; type=&quot;search&quot; name=&quot;q&quot; value=&quot;&quot; placeholder=&quot;Search&quot; role=&quot;combobox&quot; aria-expanded=&quot;false&quot; aria-owns=&quot;predictive-search-results-list&quot; aria-controls=&quot;predictive-search-results-list&quot; aria-haspopup=&quot;listbox&quot; aria-autocomplete=&quot;list&quot; autocorrect=&quot;off&quot; autocomplete=&quot;off&quot; autocapitalize=&quot;off&quot; spellcheck=&quot;false&quot;&gt;
&lt;label class=&quot;field__label&quot; for=&quot;Search-In-Modal-1&quot;&gt;Search&lt;/label&gt;
&lt;input type=&quot;hidden&quot; name=&quot;options[prefix]&quot; value=&quot;last&quot;&gt;
&lt;button class=&quot;search__button field__button&quot; aria-label=&quot;Search&quot;&gt;
&lt;!--&lt;svg class=&quot;icon icon-search&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot; role=&quot;presentation&quot;&gt;
&lt;use href=&quot;#icon-search&quot;&gt;
&lt;/svg&gt;--&gt;
&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 32 32&quot; class=&quot;icon icon-search&quot;&gt;
&lt;path d=&quot;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&quot;&gt;&lt;/path&gt;
&lt;path d=&quot;M29.216 31.882l-8.499-8.451 2.784-2.787 8.499 8.451-2.784 2.787z&quot;&gt;&lt;/path&gt;
&lt;/svg&gt;
&lt;/button&gt;
&lt;/div&gt;
&lt;div class=&quot;predictive-search predictive-search--header&quot; tabindex=&quot;-1&quot; data-predictive-search&gt;
&lt;div class=&quot;predictive-search__loading-state&quot;&gt;
&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; role=&quot;presentation&quot; class=&quot;spinner&quot; viewBox=&quot;0 0 66 66&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;
&lt;circle class=&quot;path&quot; fill=&quot;none&quot; stroke-width=&quot;6&quot; cx=&quot;33&quot; cy=&quot;33&quot; r=&quot;30&quot;&gt;&lt;/circle&gt;
&lt;/svg&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;span class=&quot;predictive-search-status visually-hidden&quot; role=&quot;status&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
&lt;/form&gt;
&lt;/predictive-search&gt;
&lt;/div&gt;
&lt;div class=&quot;search-backdrop&quot;&gt;&lt;/div&gt;

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 &gt; sticky-header &gt; header.header.header--top-left.page-width.header--has-menu &gt; 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...

答案1

得分: 0

这部分的内容已翻译如下：

这应该可以工作：

<!-- 开始代码片段：js 隐藏：false 控制台：true babel：false -->

<!-- 语言：lang-css -->
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;
}

<!-- 语言：lang-html -->
<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>

<!-- 结束代码片段 -->

英文:

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;
}

&lt;div class=&quot;search-modal__container&quot;&gt;
&lt;predictive-search class=&quot;search-modal__form&quot; data-loading-text=&quot;Loading...&quot;&gt;
&lt;form action=&quot;/en/search&quot; method=&quot;get&quot; role=&quot;search&quot; class=&quot;search search-modal__form&quot;&gt;
&lt;div class=&quot;field&quot;&gt;
&lt;input class=&quot;search__input field__input&quot; id=&quot;Search-In-Modal-1&quot; type=&quot;search&quot; name=&quot;q&quot; value=&quot;&quot; placeholder=&quot;Search&quot; role=&quot;combobox&quot; aria-expanded=&quot;false&quot; aria-owns=&quot;predictive-search-results-list&quot; aria-controls=&quot;predictive-search-results-list&quot; aria-haspopup=&quot;listbox&quot; aria-autocomplete=&quot;list&quot; autocorrect=&quot;off&quot; autocomplete=&quot;off&quot; autocapitalize=&quot;off&quot; spellcheck=&quot;false&quot;&gt;
&lt;label class=&quot;field__label&quot; for=&quot;Search-In-Modal-1&quot;&gt;Search&lt;/label&gt;
&lt;input type=&quot;hidden&quot; name=&quot;options[prefix]&quot; value=&quot;last&quot;&gt;
&lt;button class=&quot;search__button field__button&quot; aria-label=&quot;Search&quot;&gt;
&lt;!--&lt;svg class=&quot;icon icon-search&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot; role=&quot;presentation&quot;&gt;
&lt;use href=&quot;#icon-search&quot;&gt;
&lt;/svg&gt;--&gt;
&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 32 32&quot; class=&quot;icon icon-search&quot;&gt;
&lt;path d=&quot;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&quot;&gt;&lt;/path&gt;
&lt;path d=&quot;M29.216 31.882l-8.499-8.451 2.784-2.787 8.499 8.451-2.784 2.787z&quot;&gt;&lt;/path&gt;
&lt;/svg&gt;
&lt;/button&gt;
&lt;/div&gt;
&lt;div class=&quot;predictive-search predictive-search--header&quot; tabindex=&quot;-1&quot; data-predictive-search&gt;
&lt;div class=&quot;predictive-search__loading-state&quot;&gt;
&lt;svg aria-hidden=&quot;true&quot; focusable=&quot;false&quot; role=&quot;presentation&quot; class=&quot;spinner&quot; viewBox=&quot;0 0 66 66&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;
&lt;circle class=&quot;path&quot; fill=&quot;none&quot; stroke-width=&quot;6&quot; cx=&quot;33&quot; cy=&quot;33&quot; r=&quot;30&quot;&gt;&lt;/circle&gt;
&lt;/svg&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;span class=&quot;predictive-search-status visually-hidden&quot; role=&quot;status&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
&lt;/form&gt;
&lt;/predictive-search&gt;
&lt;/div&gt;
&lt;div class=&quot;search-backdrop&quot;&gt;&lt;/div&gt;

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

显示背景 div 的 CSS 选择器中专注于输入。

问题

答案1

如何显示在Woocommerce购物车中的产品标题

点击按钮后没有响应 (javascript)

如何样式化TableView以使列标题透明并且没有垂直线？

如何将滑块添加到顶部标志点

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论