时间戳

首页 > 解决方案 > CSS 变量：输入：焦点未设置变量

html - CSS 变量：输入：焦点未设置变量

问题描述

我有这个简单的例子：

<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 会发出红光。

我该如何解决？

示例可以在这里找到

编辑：

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

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

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

标签： htmlcsscss-variables

解决方案

新的 CSS 伪类:focus-within将是实现这一目标的最佳方法。

: focus-within 伪类匹配匹配 :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>

推荐阅读