html - CSS 变量 : input:focus doesn't set variable

<分区>

我有这个简单的例子:

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

问题仍然存在，我怎样才能使外部 div <div class="example3">当输入集中在纯 CSS 而没有使用 javascript(如果可能的话)时会发光吗？

最佳答案

新的 CSS 伪类 :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>

关于html - CSS 变量 : input:focus doesn't set variable，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57541302/

上一篇：css - 如何给 NetlifyCMS 编辑器预览添加样式

下一篇：html - 当父级使用 flex 且元素没有内容时，Flex 子级在容器上增长

相关文章：

javascript - 具有重复值检查的多个输入

javascript - 在 jQuery 中修改 CSS 变量/自定义属性

javascript - 避免在单击链接时插入换行符

javascript - 如何在 javascript 中获取所有 h1、h2、h3 等元素？

html - 如何防止 DIV 扩展以占用所有可用宽度？

html - 水平滚动，适合内容宽度

css - 根据背景颜色计算文本颜色

css - 为什么 Firefox 不显示我的 SVG 图标，该怎么办？

javascript - 使用 jQuery 将无序列表所选项目传递到 ASP.NET Web 窗体

javascript - 如何将 Bootstrap Burger 菜单功能添加到常规 Bootstrap 菜单？