Css 输入时更改标签边框颜色：焦点

仅使用CSS，我想在输入：焦点时更改

边框颜色

HTML:

CSS:

标签{
边框：3px纯红；/*这应该会改变*/
}
输入：焦点~标签{
边框颜色：黄色；/*当“输入：模糊”时，边框颜色应为黄色*/
}

以下是我迄今为止所做的：

$("label input").on("focus blur",function(){
    $(this).parent().toggleClass("focused");
});

.focused{
    border-color: yellow;
}

---

谢谢。

我相信CSS中没有：blur伪类

CSS中的动态伪类表示状态；它们不表示DOM中的事件或状态之间的转换。也就是说：focus伪类表示处于焦点的元素；它不表示刚接收到焦点的元素，也不存在：blur伪类来表示刚失去焦点的元素

类似地，这适用于：hover伪类。虽然它表示一个上面有指向设备的元素，但对于刚被指向的元素，既没有：mouseover伪类，也没有：mouseout伪类，对于刚被指向的元素，也没有：mouseout伪类

如果需要将样式应用于未处于焦点的图元，则有两种选择：

Use :not(:focus) (with less browser support):

input:not(:focus), button:not(:focus) {
    /* Styles for only form inputs and buttons that do not have focus */
}

声明适用于任何元素（无论其焦点状态如何）的规则，并覆盖具有焦点的元素：

input, button {
    /* Styles for all form inputs and buttons */
}

input:focus, button:focus {
    /* Styles for only form inputs and buttons that have focus */
}

---

这个答案最初是由BOLTCLOCK（）发布的。

您正在寻找一个css父选择器，它也不存在。您可以使用jquery来完成

$("label input").on("focus blur",function(){
    $(this).parent().toggleClass("focused");
});

.focused{
    border-color: yellow;
}

---

据我所知，CSSOh中没有：blur伪类，这是我的错误。我的意思是“专注”。非常感谢。你好这是我的错误。我想用：聚焦。对不起（在您发表评论后，我更新了问题。我犯了一个错误，但是“：focus”是我真正想要使用的。无论如何，感谢您的解决方案。我将等待一些CSS唯一的答案，但您的答案是迄今为止最好的。非常感谢！）

$("label input").on("focus blur",function(){
    $(this).parent().toggleClass("focused");
});

.focused{
    border-color: yellow;
}