浮动标签目前有多种类型，节省导入UI的空间，常用于Material Design等使用程序。
**提供空间： **附加作品First Name称：日本星座，屏幕空间有限，垂直空间有限。
导入内容的澄清： 进入之后，看到船的开头和结尾时我很困惑。
附加交替： 基于焦点的平滑凸运动作为有效的视觉反馈提供，目前可导入。
Placeholder hack: 使用 :placeholder-shown 伪类仅使用 CSS 下衮杯访态（输入或未输入），但在 JavaScript 中不使用。 (* HTML 简单的 placeholder=" " 是必需的)
确保可见性： 在本文档的开头，主要尺寸和颜色的一般小字体大小（scale(0.75)）和大字体大小（font-weight: 500）保持可见性。
**辅助功能： **通讯连接“标签”元素“for”属性和“输入”元素“id”，支持屏幕读屏设备以及设置时改变焦点。另外，还完成了“pointer-events: none”的规范，方便操作。
从以下几点，您可以调整设计系统的目的。
**着色：**常规.fli-input:focus和.fli-input:focus ~ .fli-label（当前为#6366f1）的颜色变化和产品颜色。
**水角和图像：**更改了“.fli-input”、“border-radius”和“box-shadow”，可以更改为更扁平的设计或更时尚的设计。
** 字体大小： ** 根据调整方法的字体大小或缩小比例（scale(0.75)），.fli-input 的padding（这是上限），导入到文本中的日文文本不加权。
<div class="fli-group">
<input type="text" id="username" class="fli-input" placeholder=" " required />
<label for="username" class="fli-label">使用昵称</label>
</div>
<style>
.fli-group {
position: relative;
width: 100%;
max-width: 320px;
}
.fli-input {
width: 100%;
padding: 1.5rem 1.25rem 0.5rem;
font-size: 1rem;
font-family: inherit;
color: #0f172a;
background-color: #ffffff;
border: 2px solid #e2e8f0;
border-radius: 0.75rem;
outline: none;
box-sizing: border-box;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
}
.fli-input:hover {
border-color: #cbd5e1;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.025);
}
.fli-input:focus {
border-color: #6366f1;
box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15);
background-color: #ffffff;
}
.fli-label {
position: absolute;
top: 1.1rem;
left: 1.25rem;
font-size: 1rem;
color: #64748b;
pointer-events: none;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
transform-origin: left top;
}
/* 输入或完成状态 */
.fli-input:focus ~ .fli-label,
.fli-input:not(:placeholder-shown) ~ .fli-label {
transform: translateY(-0.6rem) scale(0.75);
color: #6366f1;
font-weight: 500;
}
/* 失去焦点但仍在输入 */
.fli-input:not(:focus):not(:placeholder-shown) ~ .fli-label {
color: #475569;
}
</style>Chrome：最新版本书书
Safari：最新版本的书籍的书籍
火狐测量员：最新版书
高桥浩：最新版书
如果您当前拥有该设备，请使用“:placeholder-shown”以便安全地使用它。