Expected outcome is not appearing because of some kind of CSS overiddance

I'm a beginner coder, and I'm currently creating a website as a personal project. I was going smoothly, but then suddenly an unexpected output happened and I stopped at my tracks. I have just added all code that I believe relevant.

Issue: the grid and everything inside acts as a pop-up. The gridAEP acts as a popup on top of the initial pop-up. I was trying to add some input boxes, and I already had a design which I was using elsewhere in the project. But when I added the class input-box to the input, unexpected outputs occurred.

The placeholder text is orange+purple (should only apply to labels) and so is the user input text. I wanted the placeholder and user input text to be plain white. But most of all, the real problem is that when hovered, both placeholder text and user input text just disappears, as in becomes invisible, even though it's there (verified by selecting text).

Expected output: I was expecting it to behave as normal. The background should be the colour it is, but the placeholder should be white and the text input by user should be white as well. Also, the text shouldn't become invisible when hovered.

I have tested the below code in a code tester and the issue still persists. Here is all the relevant CSS and HTML markup:

 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>

Solution

The issue you're facing is likely due to the label tag wrapping the input field. To fix the issue and achieve the expected output, I recommend separating the label and input tags. Here's an example where I’ve placed each label and input inside their own div container for better layout control

<div id="gridAEP" class="grid">
    <div>
      <label>Input 1</label>
      <input
        type="text"
        placeholder="Enter name here"
        class="input-box w-full"
      />
    </div>
    <div>
      <label>Input 2</label>
      <input
        type="number"
        placeholder="Enter tier here (1-5)"
        class="input-box w-full"
      />
    </div>
    <div>
      <label>Input 3(Optional)</label>
      <input
        type="text"
        placeholder="Enter emoji representing name"
        class="input-box w-full"
      />
    </div>
  </div>