主页 / user-29154462

Shubhadeep Roy's questions

Martin Hope
Shubhadeep Roy
Asked: 2025-01-12 14:22:30 +0800 CST
  • 5

我是一名初级程序员，目前正在创建一个网站作为个人项目。我进展顺利，但突然出现了意想不到的结果，我停下了脚步。我刚刚添加了所有我认为相关的代码。

问题：网格及其内部的所有内容都充当弹出窗口。gridAEP 充当初始弹出窗口顶部的弹出窗口。我试图添加一些输入框，并且我已经有一个在项目其他地方使用的设计。但是当我将类输入框添加到输入时，出现了意外的输出。

占位符文本是橙色+紫色（仅适用于标签），用户输入文本也是如此。我希望占位符和用户输入文本是纯白色的。但最重要的是，真正的问题是，当悬停时，占位符文本和用户输入文本都会消失，就像变得不可见一样，即使它们在那里（通过选择文本进行验证）。

预期输出：我期望它表现正常。背景应该是原来的颜色，但占位符应该是白色，用户输入的文本也应该是白色。此外，文本在悬停时不应变得不可见。

我已经在代码测试器中测试了以下代码，但问题仍然存在。以下是所有相关的 CSS 和 HTML 标记：

 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;
      font-size: 14px;
      margin-bottom: 10px;
      transition: transform 0.3s, box-shadow 0.3s;
}

.input-box:hover {
      transform: scale(1.05);
      box-shadow: 0 0 10px rgba(255, 126, 95, 0.8);
}

/* Element container */
.grid {
    display: grid;
    gap: 20px;
    padding: 0 10px; /* Ensure spacing inside the border */
    z-index: 1020;
}

#addElementPopup {
    width: 750px; /* Smaller size */
    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: 1001;
    border-radius: 20px;
    z-index: 1010;
}
<!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>
    </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>

css