css 焦点未触发细节焦点

ffdz8vbo 于 2023-03-05 发布在其他

关注(0)|答案(2)|浏览(107)

问题是当focus pseudo-class被触发时，如何设置detail html元素的样式。
:focus CSS伪类表示已获得焦点的元素（如表单输入）。它通常在用户单击或点击元素或使用键盘的Tab键选择元素时触发。
MDN
下面是一个演示片段：

:focus { outline: none; }

body {
  display: flex;
  flex-direction: column;
  gap: 2em;
}

details {
  background: red;
}

summary {
  background: green;
}

details:hover {
  box-shadow:0 0 0 2px blue;
}

/* this one doesn not work */
details:focus {
  box-shadow:0 0 0 2px blue;
}

button:focus {
  box-shadow:0 0 0 2px blue;
}

<input type="text" value="press tab to switch focus">

<details>
  <summary>summary should be blue on focus</summary>
  
  <p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, ex facilis iusto. Ab laboriosam deserunt neque fuga reprehenderit, inventore non? Quo sint iusto commodi architecto magni sit maiores beatae exercitationem.
  </p>
</details>

<button>the button should be blue on focus</button>

Try it online!

css

来源：https://stackoverflow.com/questions/75605420/focus-is-not-trigger-on-details-focus

2条答案

按热度按时间

eeq64g8w1#

焦点确实可以与交互元素（eidogg.输入、按钮、链接等）开箱即用。
如果要使另一个元素成为可聚焦的，可以添加tabindex属性。
在您的情况下，它看起来像这样：

<input type="text" value="press tab to switch focus">

<details tabindex="0">
  <summary>summary should be blue on focus</summary>

   <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, ex 
      facilis iusto. Ab laboriosam deserunt neque fuga reprehenderit, 
      inventore non? Quo sint iusto commodi architecto magni sit maiores 
      beatae exercitationem.
   </p>
</details>

<button>the button should be blue on focus</button>

赞(0）回复(0）举报 2023-03-05

pvabu6sv2#

在按照Sebsemillia的建议使用了tabIndex之后，我选择了另一个解决方案。在原始代码片段中，我们使用了以下结构：

- input
 - details
   - summary
 - button

如果没有tabIndex=0，浏览器会关注input，然后跳过details，因为它不是一个交互元素，然后转到摘要，然后到达button。
使用tabIndex=0时，浏览器的焦点集中在input上，然后强制转到details，即使它不是一个交互元素，然后转到摘要，然后到达button。
现在这是我的问题的真实的的问题。为什么要给予注意力放在细节上呢？这个问题的标题不好，因为OP想要的是用蓝色边框 Package 整个details/summary。
如何修复代码。
替换

details:focus {
  box-shadow:0 0 0 2px blue;
}

与

details:focus-within {
  box-shadow:0 0 0 2px blue;
}

:focus-within CSS伪类与元素匹配（如果该元素或其任何后代已获得焦点）。换句话说，它表示的元素本身与:focus伪类匹配，或者具有与:focus匹配的后代。（这包括阴影树中的后代）。
MDN
一个三个三个一个

赞(0）回复(0）举报 2023-03-05

我来回答

css 焦点未触发细节焦点

2条答案

相关问题

热门标签

最新问答