css3失去焦点伪类_CSS：伪类内的焦点

news/2024/6/30 9:57:04

css3失去焦点伪类

介绍 (Introduction)

Selecting a parent element has long been impossible to do using just CSS, but a pseudo-class, :focus-within, changes that story somewhat. It allows to style an element when it has focus, but also when any of its inner elements (descendants) have focus. A prime example is with a form where you’d want a container element to be styled a certain way when the user focuses into one of the input elements.

长期以来，仅使用CSS来选择父元素是不可能的，但是伪类：focus-within会稍微改变这个故事。它允许在元素具有焦点时设置样式，也可以在其任何内部元素(后代)具有焦点时设置样式。一个很好的例子是一种表单，当用户将焦点放在输入元素之一时，您希望容器元素以某种方式设置样式。

HTML和CSS代码 (HTML and CSS Code)

Here’s an example of using :focus-within with a form. Let’s start with this markup:

这是在表单中使用：focus-within的示例。让我们从这个标记开始：

<form tabindex="0" class="myForm">
  <h3>What's your favorite color?</h3>
  <input type="text">
</form>

And our CSS rules are the following:

我们CSS规则如下：

.myForm:focus-within {
  background: #f8f8f8
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 35px,
      rgba(255, 255, 255, 0.5) 35px,
      rgba(255, 255, 255, 0.5) 70px
    );
}
.myForm:focus-within::before {
  content: "I'm a happy selected form!";
  color: rgb(239, 187, 53);
}

工作演示 (Working Demo)

Below you can see the result if you’re using a supporting browser. Notice how the different background is applied to the containing form element when the form itself is focused or when either of the inputs are focused.

如果您使用的是支持的浏览器，则可以在下面看到结果。请注意，当表单本身被聚焦或两个输入中的任何一个被聚焦时，如何将不同的背景应用于包含的表单元素。

If we had used the good old :focus pseudo-class instead of :focus-within, our container form would be styled only when the focus is on the form itself, but not when the inputs are focused:

如果我们使用旧的：focus伪类而不是：focus-within ，则仅当焦点位于表单本身时才设置容器表单的样式，而对输入进行聚焦时则不会：

Thanks to Lea Verou for the CSS background pattern.

感谢Lea Verou提供CSS背景图案。

结论 (Conclusion)

In order for :focus-within to work as expected, you’ll have to make sure that the inner elements of the container are focusable. Input elements are focusable by default, but div, img or p elements, for example, are not. The tabindex attribute can be used to make an element focusable. The container element should also be focusable in order to receive the styling when focusing from just the container.

为了使：focus-within能够按预期工作，您必须确保容器的内部元素是可聚焦的。输入元素默认情况下是可聚焦的，但是div ， img或p元素则不能。 tabindex属性可用于使元素具有焦点。容器元素也应该是可聚焦的，以便在仅从容器聚焦时接收样式。

Browser Compatibility Check: As of 2020, all modern browsers support focus-within, but check Can I Use for detailed, version-specific browser support.

浏览器兼容性检查：自2020年起，所有现代浏览器都支持focus-within ，但请选中“我可以使用”以获取详细的特定于版本的浏览器支持。