CSS样式覆盖导致输入框文本异常及弹窗层级问题求助

核心问题原因 #

• label的-webkit-text-fill-color: transparent会被内部input元素继承，覆盖了input的color: white设置，导致输入文本和placeholder显示为透明（继承渐变文字的透明填充）
• 未单独设置placeholder的颜色，且hover时继承的透明填充未被覆盖

修复步骤及代码 #

1. 修正HTML语法错误 #

原HTML中<div" id="addElementOverlay">多了一个引号，改为：

<div id="addElementOverlay">

2. 修改CSS样式 #

给input元素强制重置继承的文本填充属性，并设置placeholder颜色：

label {
  display: block;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  background: linear-gradient(45deg, #ff7e5f, #6a5acd);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 5px;
}

.input-box {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 10px;
  padding: 10px;
  color: white;
  /* 重置继承的文本填充属性，确保文字显示白色 */
  -webkit-text-fill-color: white;
  font-size: 14px;
  margin-bottom: 10px;
  transition: transform 0.3s, box-shadow 0.3s;
}

/* 设置placeholder颜色为白色 */
.input-box::placeholder {
  color: white;
  opacity: 1; /* 确保placeholder不透明 */
}

.input-box:hover {
  transform: scale(1.05);
  box-shadow: 0 0 10px rgba(255, 126, 95, 0.8);
  /* hover时保持文本填充为白色，防止消失 */
  -webkit-text-fill-color: white;
}

/* Element container */
.grid {
  display: grid;
  gap: 20px;
  padding: 0 10px; /* 确保边框内间距 */
  z-index: 1020;
}

#addElementPopup {
  width: 750px; /* 缩小尺寸 */
  height: 550px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 20px;
  background: black;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  gap: 20px;
  z-index: 1010;
}

3. 完整修复后的HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
    /* 上述修改后的CSS代码放在此处 */
  </style>
</head>
<body>
<div id="addElementOverlay">
  <div id="addElementPopup" class="hidden">
    <div id="gridAEP" class="grid">
      <label>Input 1<input type="text" placeholder="Enter name here" class="input-box w-full" /></label>
      <label>Input 2<input type="number" placeholder="Enter tier here (1-5)" class="input-box w-full"/></label>
      <label>Input 3(Optional)<input type="text" placeholder="Enter emoji representing name" class="input-box w-full"/></label>
    </div>
  </div>
</div>
</body>
</html>

效果验证 #

• 输入框的用户输入文本和placeholder均显示纯白色
• 鼠标悬停输入框时，文本不会消失，同时保留原有的缩放和阴影效果
• label的渐变文字样式不受影响

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