Question

我有一个简单的例子：

<html>
<head>
<style>
:root {
    --textbox-box-shadow: none;
}
.example3 {
    display: block;
    border: 1px solid red;
    padding: 10px;
    box-shadow: var(--textbox-box-shadow);
}


.example3 input:focus {
    --textbox-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px red;
}
</style>
</head>
<body>

<div class="example3">
Enter your name : <input>
</div>

</body>
</html>

我正在尝试使“ div”内部的输入元素聚焦时发光。

代码不起作用，我不知道为什么。

在给变量赋予初始值时 inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px red; div不会发红光。

我该如何解决？

Example can be found here

编辑：

事实证明，这实际上创建了一个名为“ textbox-box-shadow”的新局部变量。

.example3 input:focus {
    --textbox-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px red;
}

问题仍然存在，当输入仅使用纯CSS而不使用javascript时（如果可能的话），如何使外部div <div class="example3">发光？

Answer 1

新的CSS伪类:focus-within是实现这一目标的最佳选择。

:focus-within pseudo-class匹配的元素要么匹配：focus他们自己，要么拥有子元素匹配：focus。

:root {
  --textbox-box-shadow: none;
}

.example3 {
  display: block;
  border: 1px solid red;
  padding: 10px;
  box-shadow: var(--textbox-box-shadow);
}

.example3:focus-within {
  --textbox-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px red;
}

<div class="example3">
  Enter your name : <input class="ip">
</div>

Answer 2

您在正确的轨道上。您需要将CSS变量声明为值，然后将该变量作为值传递给其他属性。即：

:root {
     --textbox-box-shadow: none;
     --textbox-box-shadow-glow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px red;
}
.example3 {
    display: block;
    border: 1px solid red;
    padding: 10px;
    box-shadow: var(--textbox-box-shadow);
}
.example3 input:focus {
    box-shadow: var(--textbox-box-shadow-glow);
}

CSS变量：input：focus没有设置变量

2 个答案: