NetSuite环境下输入框有内容非聚焦时浮动标签保持悬浮的CSS实现求助

解决方案 #

方案1：纯CSS实现（现代浏览器兼容） #

核心利用CSS :has() 选择器和 :placeholder-shown 伪类判断输入框是否有内容，无需编写JS：

1. 调整input标签的placeholder属性，设置值为空格即可：

<input type="text" class="" id="firstname" placeholder=" ">

2. 补充完整CSS样式，包含基础定位和有值场景的样式规则：

/* 基础定位样式，浮动标签必要配置 */
.custom_floating {
  position: relative;
}
.custom_floating label.form-control-placeholder {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  transition: all 0.2s ease;
  pointer-events: none;
  margin: 0;
  padding: 0 0.25rem;
  background-color: #fff; /* 需和输入框背景色保持一致，遮盖输入框边框 */
}
/* 聚焦+有值场景都触发上浮 */
.custom_floating > span:focus-within + label,
.custom_floating > span:has(input:not(:placeholder-shown)) + label {
  opacity: 0.65;
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}

方案2：JS兼容实现（全浏览器兼容，NetSuite通用） #

如果需要兼容不支持 :has() 选择器的旧浏览器，用JS监听输入事件动态加类即可，NetSuite环境可直接嵌入客户端脚本或自定义HTML片段：

1. 添加JS逻辑：

// 监听所有输入事件，动态更新标记类
document.addEventListener('input', function(e) {
  const input = e.target;
  const floatingWrap = input.closest('.custom_floating');
  if (!floatingWrap) return;
  const parentSpan = input.parentElement;
  input.value.trim() ? parentSpan.classList.add('filled') : parentSpan.classList.remove('filled');
});
// 页面初始化时批量处理已有值的输入框
document.querySelectorAll('.custom_floating input').forEach(input => {
  if (input.value.trim()) input.parentElement.classList.add('filled');
});

2. 调整CSS规则，新增filled类匹配场景：

/* 基础定位样式同方案1一致，替换选择器即可 */
.custom_floating > span:focus-within + label,
.custom_floating > span.filled + label {
  opacity: 0.65;
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}

小优化建议 #

可将label的for属性改为对应input的id值（当前input id为firstname，可将label改为<label for="firstname" ...>），实现点击标签自动聚焦输入框的效果。

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