网页表单输入框聚焦高亮动效需用transition平滑过渡border-color、box-shadow等可动画属性，初始样式须明确（如border:1px solid #ccc），:focus仅修改已声明属性，并兼顾移动端兼容与标签联动。

网页表单输入框实现聚焦高亮动效，核心是用 transition 平滑过渡 border-color、box-shadow 或 outline-color 等可动画属性，同时规避常见陷阱（如直接写 transition: border 会失效）。

必须写的初始样式与过渡声明

过渡效果必须定义在默认状态（非伪类），且初始值要明确可计算：

• 边框必须有初始宽度和颜色，推荐：border: 1px solid #ccc 或更稳妥的 border: 1px solid transparent
• transition 写在基础选择器里，例如：.input-field { transition: border-color 0.25s ease, box-shadow 0.25s ease; }
• 不要写 transition: border——浏览器不支持复合属性动画，会导致跳变或无反应

聚焦时只改可过渡的子属性

:focus 状态下仅修改已声明过渡的属性，保持轻量可控：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• 改边框色：border-color: #007bff（对比度需 ≥ 4.5:1）
• 加柔和发光：box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2)（避免纯白/高饱和光晕）
• 若用 outline，先清原生轮廓：outline: none，再用 outline-color + outline-offset: 2px 微调位置，防止与 border 重叠

浮动标签联动（可选增强）

当输入框获得焦点，标签上浮缩放，提升空间效率与现代感：

• 父容器设 position: relative，label 绝对定位，初始 transform: translateY(-1.4em) scale(0.85)
• :focus-within 或 JS 监听后，给父容器加 class，触发 transform: translateY(-1.8em) scale(1)
• 只对 transform 和 opacity 做 transition，避免 top/left 引发重排卡顿

移动端与兼容性兜底要点

确保在 iOS Safari、微信 WebView 等环境依然可用：

• iOS Safari 默认不触发 :active，但 :focus 正常；若需点击反馈，按钮类元素加 cursor: pointer
• :focus-within 在 Safari 15.4+、Chrome 60+ 支持良好，旧版本需 JS fallback（监听 focus/blur/input 事件切 class）
• 避免依赖 placeholder 显示状态判断是否为空，应监听 input.value.trim()