css 用途：focus-within只在焦点是按钮时应用焦点

hec6srdp 于 2023-04-01 发布在其他

关注(0)|答案(1)|浏览(136)

有没有一种方法可以只在焦点在input而不是button上时才在元素上应用样式？
下面是一个简单的HTML示例：

<div>
  <input />
  <button>Click Me</button>
</div>

这里是SCSS一起去，因为这似乎不工作...

.div:focus-within:is(button) {
  // Apply style to the div only if the input is focused.
  // As the button has its own focus style.
}

css

来源：https://stackoverflow.com/questions/75859319/use-focus-within-to-only-apply-focus-if-the-focus-is-a-button

1条答案

按热度按时间

ejk8hzay1#

使用:has()选择器：

div:focus-within:has( *:not(button):focus ) {

    background-color: green;
}

div:focus-within:has( button:focus ) {

    background-color: red;
}

<div>

  <button>Button</button>

  <input type="text" />

</div>

<div>

  <button>Button</button>

  <input type="text" />

</div>

<div>

  <button>Button</button>

  <input type="text" />

</div>

赞(0）回复(0）举报 2023-04-01

我来回答

css 用途：focus-within只在焦点是按钮时应用焦点

1条答案

相关问题

热门标签

最新问答