Question

只需要CSS，我想在输入：焦点时更改<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/

谢谢。

Answer 1

你正在寻找一个css父选择器，它也不存在。你可以用jquery

来做

<强> DEMO

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

.focused{
    border-color: yellow;
}

Answer 2

我相信没有：CSS中的伪类。

CSS中的动态伪类表示状态;根据DOM，它们不代表状态之间的事件或转换。即：：focus伪类表示一个焦点元素;它不代表刚刚获得焦点的元素，也不存在：blur伪类来表示刚刚失去焦点的元素。

同样，这适用于：hover伪类。虽然它表示一个在其上有一个指针设备的元素，但是对于刚被指向的元素既没有：mouseover伪类，也没有针对刚刚指向的元素的：mouseout伪类。< / p>

如果您需要将样式应用于不在焦点的元素，您有两种选择：

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）原始发布的

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

2 个答案: