悬汇标签输入框

段落

使用昵称

日语函数的用法示例

浮动标签目前有多种类型，节省导入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：最新版本的书籍的书籍
火狐测量员：最新版书
高桥浩：最新版书