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

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; 而不是 "none"，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 变量声明为一个值，然后将该变量作为不同属性的值传递。即：

: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);
}

Answer 2

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

The :focus-within pseudo-class matches elements that either match :focus themselfves or that have child which match :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>

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

CSS variables: input:focus doesn't set variable

html

css

css-variables