文章标签

Louis Lazaris 拆解 来自 Jane 的一些货真价实的 CSS 技巧。此 Pen 展示了以下交互性：

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 

我认为 :placeholder-shown 选择器非常酷。它允许您选择输入的占位符 (<input placeholder="..."/>)，当该占位符存在时。这意味着，输入还没有任何值。您可能会想到 input[value]…

浮动标签技术已经存在了 很长时间，其基本思想是：我们有一个文本输入，其占位符属性充当标签。当用户在该输入中键入时，标签会...