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

huangapple
go评论125阅读模式
英文:

Focus on input to display backdrop div with CSS selector

问题

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

Shopify 的代码片段：

  1. <div class="search-modal__container">
  2.     <predictive-search class="search-modal__form" data-loading-text="Loading...">
  3.         <form action="/en/search" method="get" role="search" class="search search-modal__form">
  4.             <div class="field">
  5.                 <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">
  6.                 <label class="field__label" for="Search-In-Modal-1">Search</label>
  7.                 <input type="hidden" name="options[prefix]" value="last">
  8.                 <button class="search__button field__button" aria-label="Search">
  9.                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" class="icon icon-search">
  10.                         <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>
  11.                         <path d="M29.216 31.882l-8.499-8.451 2.784-2.787 8.499-8.451-2.784 2.787z"></path>
  12.                     </svg>
  13.                 </button>
  14.             </div>
  15.             <div class="predictive-search predictive-search--header" tabindex="-1" data-predictive-search>
  16.                 <div class="predictive-search__loading-state">
  17.                     <svg aria-hidden="true" focusable="false" role="presentation" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
  18.                         <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
  19.                     </svg>
  20.                 </div>
  21.             </div>
  22.             <span class="predictive-search-status visually-hidden" role="status" aria-hidden="true"></span>
  23.         </form>
  24.     </predictive-search>
  25. </div>
  26. <div class="search-backdrop"></div>

我尝试过的 CSS：

  1. div.search-backdrop {
  2.     position: absolute;
  3.     width: 100%;
  4.     height: 100vh;
  5.     background-color: rgba(var(--color-foreground), .2);
  6.     backdrop-filter: blur(2px);
  7.     z-index: 1;
  8.     top: 0px;
  9.     left: 0px;
  10.     display: none;
  11. }
  13. input#Search-In-Modal-1:focus ~ #shopify-section-header > sticky-header > header.header.header--top-left.page-width.header--has-menu > div.search-backdrop {
  14.     display: block;
  15. }

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

我从浏览器开发者菜单中获取了 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:

  1.                 &lt;div class=&quot;search-modal__container&quot;&gt;
  2. &lt;predictive-search class=&quot;search-modal__form&quot; data-loading-text=&quot;Loading...&quot;&gt;
  3. &lt;form action=&quot;/en/search&quot; method=&quot;get&quot; role=&quot;search&quot; class=&quot;search search-modal__form&quot;&gt;
  4. &lt;div class=&quot;field&quot;&gt;
  5. &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;
  6. &lt;label class=&quot;field__label&quot; for=&quot;Search-In-Modal-1&quot;&gt;Search&lt;/label&gt;
  7. &lt;input type=&quot;hidden&quot; name=&quot;options[prefix]&quot; value=&quot;last&quot;&gt;
  8. &lt;button class=&quot;search__button field__button&quot; aria-label=&quot;Search&quot;&gt;
  9. &lt;!--&lt;svg class=&quot;icon icon-search&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot; role=&quot;presentation&quot;&gt;
  10. &lt;use href=&quot;#icon-search&quot;&gt;
  11. &lt;/svg&gt;--&gt;
  12. &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;
  13. &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;
  14. &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;
  15. &lt;/svg&gt;
  16. &lt;/button&gt;
  17. &lt;/div&gt;
  18. &lt;div class=&quot;predictive-search predictive-search--header&quot; tabindex=&quot;-1&quot; data-predictive-search&gt;
  19. &lt;div class=&quot;predictive-search__loading-state&quot;&gt;
  20. &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;
  21. &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;
  22. &lt;/svg&gt;
  23. &lt;/div&gt;
  24. &lt;/div&gt;
  25. &lt;span class=&quot;predictive-search-status visually-hidden&quot; role=&quot;status&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
  26. &lt;/form&gt;
  27. &lt;/predictive-search&gt;
  28. &lt;/div&gt;
  29. &lt;div class=&quot;search-backdrop&quot;&gt;&lt;/div&gt;

The CSS I have tried:

  1. div.search-backdrop {
  2. position: absolute;
  3. width: 100%;
  4. height: 100vh;
  5. background-color: rgba(var(--color-foreground),.2);
  6. backdrop-filter: blur(2px);
  7. z-index: 1;
  8. top: 0px;
  9. left: 0px;
  10. display: none;
  11. }
  12. 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 {
  13. display: block;
  14. }

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

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

  1. 这应该可以工作：
  3. <!-- 开始代码片段：js 隐藏：false 控制台：true babel：false -->
  5. <!-- 语言：lang-css -->
  6. div.search-backdrop {
  7.   position: absolute;
  8.   width: 100%;
  9.   height: 100vh;
  10.   background-color: rgba(var(--color-foreground),.2);
  11.   backdrop-filter: blur(2px);
  12.   z-index: 1;
  13.   top: 0px;
  14.   left: 0px;
  15.   display: none;
  16. }
  18. .search-modal__container:has(#Search-In-Modal-1:focus-visible) + .search-backdrop {
  19.   display: block;
  20. }
  22. <!-- 语言：lang-html -->
  23. <div class="search-modal__container">
  24.     <predictive-search class="search-modal__form" data-loading-text="Loading...">
  25.         <form action="/en/search" method="get" role="search" class="search search-modal__form">
  26.             <div class="field">
  27.                 <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">
  28.                 <label class="field__label" for="Search-In-Modal-1">Search</label>
  29.                 <input type="hidden" name="options[prefix]" value="last">
  30.                 <button class="search__button field__button" aria-label="Search">
  31.                     <!-- <svg class="icon icon-search" aria-hidden="true" focusable="false" role="presentation">
  32.                                   <use href="#icon-search">
  33.                                 </svg>-->
  34.                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" class="icon icon-search">
  35.                         <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>
  36.                         <path d="M29.216 31.882l-8.499-8.451 2.784-2.787 8.499-8.451-2.784 2.787z"></path>
  37.                     </svg>
  38.                 </button>
  39.             </div>
  40.             <div class="predictive-search predictive-search--header" tabindex="-1" data-predictive-search>
  41.                 <div class="predictive-search__loading-state">
  42.                     <svg aria-hidden="true" focusable="false" role="presentation" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
  43.                         <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
  44.                     </svg>
  45.                 </div>
  46.             </div>
  48.             <span class="predictive-search-status visually-hidden" role="status" aria-hidden="true"></span>
  49.         </form>
  50.     </predictive-search>
  51. </div>
  52. <div class="search-backdrop"></div>
  54. <!-- 结束代码片段 -->
英文:

This should work:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. div.search-backdrop {
  2. position: absolute;
  3. width: 100%;
  4. height: 100vh;
  5. background-color: rgba(var(--color-foreground),.2);
  6. backdrop-filter: blur(2px);
  7. z-index: 1;
  8. top: 0px;
  9. left: 0px;
  10. display: none;
  11. }
  12. .search-modal__container:has(#Search-In-Modal-1:focus-visible) + .search-backdrop {
  13. display: block;
  14. }

<!-- language: lang-html -->

  1. &lt;div class=&quot;search-modal__container&quot;&gt;
  2. &lt;predictive-search class=&quot;search-modal__form&quot; data-loading-text=&quot;Loading...&quot;&gt;
  3. &lt;form action=&quot;/en/search&quot; method=&quot;get&quot; role=&quot;search&quot; class=&quot;search search-modal__form&quot;&gt;
  4. &lt;div class=&quot;field&quot;&gt;
  5. &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;
  6. &lt;label class=&quot;field__label&quot; for=&quot;Search-In-Modal-1&quot;&gt;Search&lt;/label&gt;
  7. &lt;input type=&quot;hidden&quot; name=&quot;options[prefix]&quot; value=&quot;last&quot;&gt;
  8. &lt;button class=&quot;search__button field__button&quot; aria-label=&quot;Search&quot;&gt;
  9. &lt;!--&lt;svg class=&quot;icon icon-search&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot; role=&quot;presentation&quot;&gt;
  10. &lt;use href=&quot;#icon-search&quot;&gt;
  11. &lt;/svg&gt;--&gt;
  12. &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;
  13. &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;
  14. &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;
  15. &lt;/svg&gt;
  16. &lt;/button&gt;
  17. &lt;/div&gt;
  18. &lt;div class=&quot;predictive-search predictive-search--header&quot; tabindex=&quot;-1&quot; data-predictive-search&gt;
  19. &lt;div class=&quot;predictive-search__loading-state&quot;&gt;
  20. &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;
  21. &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;
  22. &lt;/svg&gt;
  23. &lt;/div&gt;
  24. &lt;/div&gt;
  25. &lt;span class=&quot;predictive-search-status visually-hidden&quot; role=&quot;status&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
  26. &lt;/form&gt;
  27. &lt;/predictive-search&gt;
  28. &lt;/div&gt;
  29. &lt;div class=&quot;search-backdrop&quot;&gt;&lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年6月29日 23:01:30
  • 转载请务必保留本文链接：https://go.coder-hub.com/76582278.html
  • css
  • css-selectors
  • shopify
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定