文本框水印提示效果的简单实现代码

以下是一个简单的文本框水印提示效果的实现代码，使用HTML和CSS来完成。这种效果常用于网页上未填写或需要提示用户输入的区域。


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本框水印提示效果</title>
<style>
  .watermark-input {
    position: relative;
    width: 200px;
    height: 40px;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 10px;
    font-size: 16px;
  }
  
  .watermark-input::placeholder {
    color: transparent; /* 隐藏原生placeholder */
  }
  
  .watermark-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #aaa; /* 水印颜色 */
    pointer-events: none; /* 确保鼠标事件穿透 */
  }
  
  /* 当文本框有内容时，隐藏水印 */
  .watermark-input:not(:placeholder-shown) + .watermark-text {
    display: none;
  }
</style>
</head>
<body>

<input type="text" class="watermark-input" placeholder="请输入内容...">
<span class="watermark-text">请输入内容...</span>

</body>
</html>

**注意**：这个实现方法使用了`::placeholder`伪元素来隐藏原生的placeholder文本，并通过绝对定位的`span`元素来显示自定义的水印文本。通过CSS选择器`:not(:placeholder-shown)`来判断文本框是否有内容，从而控制水印文本的显示与隐藏。但是，请注意`:not(:placeholder-shown)`伪类的兼容性，它在较旧的浏览器中可能不被支持。

对于不支持`:not(:placeholder-shown)`的浏览器，你可能需要通过JavaScript来添加额外的逻辑以隐藏水印文本。不过，由于本回答仅涉及HTML和CSS，这里不展开JavaScript的解决方案。