仅使用css更改输入焦点的背景颜色

Question

点击输入后，尝试更改输入支架的背景颜色，我使用了这些

<div class="name"> <input type="text" class="input-name"></div>

CSS

.input-name:focus + .name{
background:#f00;
}

这是正常的

这就是我想要的焦点

但它不会工作

Answer 1

您无法使用CSS选择父元素。

然而。你可以伪装类似于盒子阴影的东西

body {
    margin: 25px; /* not required */
}

.input-name:focus {
    box-shadow:0 0 0 10px red;
}

<div class="name">
    <input type="text" class="input-name" />
</div>

Answer 2

不幸的是，您无法使用CSS选择父级。

Is there a CSS parent selector?

这必须通过脚本完成。

(function() {
    var inputs = document.getElementsByClassName('input-name');
    if( !(inputs && inputs.length) ) return;

    function toggleRed(elem) {
        elem.classList.toggle('red');
    }

    for(var i=0; i < inputs.length; i++) {
        var input = inputs[i];

        // focus
        input.addEventListener('focus', function() {
             toggleRed(this.parentElement);
        });

        // blur
        input.addEventListener('blur', function() {
             toggleRed(this.parentElement);
        });
    }
})();

选中此演示

http://jsfiddle.net/andyw_/6ec1efs2/1/

Answer 3

虽然你想要的确切事情无法完成，但@Paulie_D的答案与纯css的答案最接近。

完全你想要的东西你需要使用javascript，因为如上所述，你不能选择父元素。

这是javascript：

function myFunction() {
document.getElementById("name").style.background = "red";

}

HTML：

<div id="name>
<input type="text" id="input" onfocus="myFunction()">