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

【问题标题】：Changing label border-color when input:focus输入时更改标签边框颜色：焦点
【发布时间】：2014-03-12 09:02:04
【问题描述】：

只有 CSS 我想在 input:focus 时更改 <label> 边框颜色。

HTML：

<label for="s">
        <input name="s" placeholder="search">
</label>

CSS：

label { 
      border: 3px solid red; /* THIS SHOULD CHANGE */
}

input:focus ~ label {
       border-color: yellow; /* WHEN "input:blur" <label> border-color should be yellow */
}

到目前为止我所做的：http://jsfiddle.net/s6Zc9/2/

谢谢。

【问题讨论】：

据我所知 CSS 中没有 :blur 伪类
哦，我的错。我的意思是“专注”。谢谢！

标签： css

【解决方案1】：

您正在寻找一个也不存在的 css 父选择器。你可以用 jquery 做到这一点

DEMO

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

.focused{
    border-color: yellow;
}

【讨论】：

在您发表评论后，我更新了问题。我犯了一个错误，但是“:focus”是我真正想要使用的。无论如何，谢谢你的解决方案。我会等待一些纯 CSS 的答案，但你的答案是迄今为止最好的。非常感谢！ =)

【解决方案2】：

我相信 CSS 中没有 :blur 伪类。

CSS 中的动态伪类表示状态；它们不代表 DOM 方面的事件或状态之间的转换。也就是说： :focus 伪类表示一个焦点元素；它不代表刚刚获得焦点的元素，也不存在 :blur 伪类来代表刚刚失去焦点的元素。

同样，这适用于 :hover 伪类。虽然它表示一个在其上具有指针设备的元素，但对于刚刚被指向的元素既没有 :mouseover 伪类，也没有刚刚被指向远离的元素的 :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 (HERE) 发布

【讨论】：

你好。这是我的一个错误。我想使用：焦点。对不起！ :(