文章标签

Louis Lazaris 解释了来自 Jane 的一些正宗 CSS 技巧。这段代码展示了交互性，其中

1. 你必须按下键盘上的特殊组合键。
2. 然后输入一个秘密密码。

然后，一条特殊的消息会弹出...

/* Only show invalid ring while not focused */
input:not(:focus):not(:placeholder-shown):invalid {
  border-color: var(--color-invalid);
}
input:not(:focus):not(:placeholder-shown):invalid ~ .error-message {
  display: block;	
}

/* Only show valid ring while not focused and if a value is entered */
/* :empty won't work