仅使用 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>