如何用纯HTML/CSS为表单输入框设置默认值并显示占位符？

很遗憾，原生HTML的<input>标签并没有内置这样的属性——根据HTML规范，placeholder的设计逻辑就是仅在输入框的value为空时显示提示文本，一旦设置了value（哪怕是默认值），占位符就会被自动隐藏，这是原生的行为规则，无法通过单一HTML属性改变。

不过我们可以用纯CSS模拟出这个效果，实现“输入框保留默认值，同时显示类似占位符的提示文本”的需求。下面是具体的实现方案：

方案：CSS模拟自定义占位符 #

核心思路是用一个父容器包裹输入框，通过绝对定位的伪元素来模拟占位符，让它和输入框的默认值同时显示，且完全不影响输入框的实际值和交互逻辑。

完整代码示例 #

<!DOCTYPE html>
<html>
<head>
<style>
body {text-align: center}
/* 父容器：相对定位，用于承载伪元素 */
.input-wrapper {
  position: relative;
  display: inline-block;
}
/* 模拟原生占位符的伪元素 */
.input-wrapper::after {
  content: attr(data-placeholder); /* 从父容器的data属性读取提示文本 */
  position: absolute;
  left: 8px; /* 和输入框内边距对齐，保证位置一致 */
  top: 50%;
  transform: translateY(-50%);
  color: #999; /* 匹配原生占位符的浅灰色 */
  pointer-events: none; /* 让点击穿透到输入框，不干扰交互 */
  /* 如果默认值较长，可改为右对齐避免重叠：right: 8px; left: auto; */
}
/* 输入框基础样式：增加内边距，避免内容和伪元素重叠 */
.input {
  padding: 4px 8px;
}
/* 可选：输入框聚焦时隐藏自定义占位符，避免干扰用户输入 */
.input:focus ~ .input-wrapper::after {
  display: none;
}
</style>
</head>
<body>
<form onsubmit="return myFunction()">
 This doesn't have default value hence placeholder is shown.<br>
 <input class="input" type="number" placeholder="Enter a Number..." id='num1'><br><br>
 This has default value AND custom placeholder is shown.<br>
 <div class="input-wrapper" data-placeholder="Enter a number...">
   <input class="input" type="number" value='10' id='num2'>
 </div><br><br>
 <input type="submit" value='submit'>
</form>
<div id="list"></div>

<script>
function myFunction() {
 var num1, num2;
 num1 = document.getElementById("num1").value;
 num2 = document.getElementById("num2").value;
 document.getElementById("list").innerHTML = '<br>num1 = ' + num1 + '<br>num2 = ' + num2;
 return false;
}
</script>
</body>
</html>

方案细节说明 #

• 我们通过input-wrapper父容器的data-placeholder属性传递提示文本，方便在多个输入框上复用样式。
• 伪元素::after被绝对定位在输入框内部，颜色和位置都匹配原生占位符的体验，pointer-events: none确保它不会挡住输入框的点击、输入等操作。
• 输入框的实际value仍然是10，提交表单时可以正常获取到这个值，完全不影响业务逻辑。
• 可选的聚焦隐藏逻辑：当用户点击输入框准备编辑时，自动隐藏自定义占位符，更符合常规的交互习惯。

注意事项 #

• 这是模拟效果而非原生placeholder，所以不会触发原生占位符的自动隐藏（比如输入内容后自动消失），但如果只是需要默认值和占位符同时显示，纯CSS方案完全够用。
• 如果需要在用户修改输入值后隐藏自定义占位符，纯CSS无法实现（CSS无法读取输入框的value变化），这时候才需要少量JavaScript辅助，但你的核心需求（默认值+占位符同时显示）用上述方案就能满足。

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