如何使用UIKit实现输入框浮动标签效果，无原生支持时最佳实践是什么

结论 #

UIKit 原生暂未内置浮动标签（输入框标签上浮）相关组件，无法仅通过UIKit原生技术实现你需要的效果。

最佳实践方案 #

你原有代码存在属性书写错误，class=uk-input" 缺少左侧引号，修正后可参考以下两种实现方案，完全适配UIKit的原生样式规范：

方案1：纯CSS实现（推荐，无额外JS依赖） #

先调整DOM结构，将输入框和标签包裹在同一个自定义容器内：

<div class="float-label">
  <input id="username" class="uk-input" type="text" required>
  <label for="username">Enter your username</label>
</div>

新增以下自定义CSS即可实现效果，样式完全对齐UIKit的设计风格：

.float-label {
  position: relative;
  margin: 1rem 0;
}
.float-label .uk-input {
  padding-top: 1.5rem;
}
.float-label label {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  margin-bottom: 0;
  font-size: 1rem;
  color: #999;
  pointer-events: none;
  transition: all 0.2s ease;
}
/* 输入框聚焦或有值时标签上浮 */
.float-label .uk-input:focus ~ label,
.float-label .uk-input:not(:placeholder-shown) ~ label,
.float-label .uk-input:valid ~ label {
  top: 0.25rem;
  font-size: 0.75rem;
  color: #1e87f0; /* 对应UIKit默认主题色 */
}

方案2：轻量JS实现（兼容性更好） #

如果需要适配不支持 :placeholder-shown 伪类的旧版浏览器，可以添加少量JS逻辑：

document.querySelectorAll('.float-label .uk-input').forEach(input => {
  // 初始化判断是否有值
  toggleLabelState(input)
  // 监听事件
  input.addEventListener('input', () => toggleLabelState(input))
  input.addEventListener('focus', () => toggleLabelState(input))
  input.addEventListener('blur', () => toggleLabelState(input))
})

function toggleLabelState(input) {
  const wrapper = input.closest('.float-label')
  if (input.value.trim() || input === document.activeElement) {
    wrapper.classList.add('active')
  } else {
    wrapper.classList.remove('active')
  }
}

对应CSS调整为通过类名控制状态即可：

.float-label.active label {
  top: 0.25rem;
  font-size: 0.75rem;
  color: #1e87f0;
}

内容的提问来源于stack exchange，提问作者YKKY