无CSS预处理器时，如何复用浏览器默认占位符颜色实现表单浮动标签样式

嘿，我完全懂你的困扰！在用Publii这种不支持预处理器、又没现成CSS变量的环境下，要让浮动标签的初始颜色和浏览器默认占位符颜色匹配，确实有点绕。不过咱们可以用两种方法解决，一种是纯JS精确匹配，另一种是纯CSS近似匹配，看你需求来选。

方法一：纯JS精确获取浏览器默认占位符颜色 #

这个方法能100%匹配当前浏览器的默认占位符颜色，不需要任何预处理器或自定义CSS变量。

步骤： #

1. 先修正你的HTML：第一个input没有对应的id，label的for属性关联不上，得补上，不然浮动交互会出问题：

<div class="floating-label">
  <input id="name" class="contact-inputs" required="" type="text" placeholder="Your Name">
  <label for="name">Your Name</label>
</div>
<div class="floating-label">
  <input id="email" class="contact-inputs" name="email" required="" type="email" placeholder="Your Email">
  <label for="email">Your Email</label>
</div>
<div class="floating-label">
  <textarea id="message" class="contact-inputs" maxlength="800" name="message" required="" placeholder="Your Message"></textarea>
  <label for="message">Your Message</label>
</div>
<button id="SubmitButtonInContactForm" type="submit">Submit</button>

2. 在页面底部添加一段JS代码（可以放在Publii的自定义JS区域）：

// 创建一个临时input来获取浏览器默认占位符颜色
const tempInput = document.createElement('input');
tempInput.type = 'text';
tempInput.placeholder = 'placeholder';
// 把临时input添加到页面（必须渲染才能获取样式）
document.body.appendChild(tempInput);
// 获取占位符的颜色值
const placeholderColor = window.getComputedStyle(tempInput, '::placeholder').color;
// 移除临时input
document.body.removeChild(tempInput);
// 给所有浮动标签的label设置颜色
document.querySelectorAll('.floating-label label').forEach(label => {
  label.style.color = placeholderColor;
});

3. 你的CSS可以保持原来的样子，只需要把label的color那行删掉，让JS来动态赋值：

.floating-label{
  position: relative;
  margin-bottom: 30px;
}
.floating-label:last-child{
  margin-bottom: 0;
}
.floating-label label{
  position: absolute;
  top: 50%;
  left: 15px;
  transform: translateY(-50%);
  font-size: 16px;
  padding: 0 5px;
  pointer-events: none;
  transition: all 0.3s ease;
  /* 这里删掉原来的color设置，由JS动态赋值 */
  background-color: transparent;
}
.floating-label input:focus, 
.floating-label input:not(:placeholder-shown),
.floating-label textarea:focus,
.floating-label textarea:not(:placeholder-shown){
  outline: none;
}
.floating-label input:focus + label, 
.floating-label input:not(:placeholder-shown) + label,
.floating-label textarea:focus + label,
.floating-label textarea:not(:placeholder-shown) + label{
  top: 0;
  font-size: 12px;
  background-color: var(--page-bg);
  padding: 0 5px;
}
.floating-label input::placeholder,
.floating-label textarea::placeholder{
  color: transparent;
}

方法二：纯CSS近似匹配（无需JS） #

如果不想用JS，也可以用近似的颜色值来模拟浏览器默认的占位符颜色，虽然不能100%精确，但在大多数浏览器里视觉效果很接近：

修改你的CSS中label的color属性：

.floating-label label{
  /* 其他样式不变 */
  color: rgba(0, 0, 0, 0.54); /* 匹配Chrome/Edge等主流浏览器默认占位符颜色 */
  /* 若想适配Safari，也可以用：color: #999; */
}

这个方法的好处是完全不需要JS，但缺点是不能精确匹配所有浏览器的默认值，不过上面的两个颜色值已经能覆盖绝大多数场景。

内容来源于stack exchange