admin管理员组

文章数量:1323729

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=""></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>

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"></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>

Share Improve this question edited Jan 13 at 15:44 Marce Puente 6473 silver badges15 bronze badges asked Jan 12 at 6:22 Shubhadeep RoyShubhadeep Roy 31 silver badge4 bronze badges
Add a comment  | 

3 Answers 3

Reset to default 2

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>

The issue you're facing seems to be related to the way the input-box class is applying styles that are affecting both the placeholder and the user input text. Specifically, the -webkit-background-clip: text; and -webkit-text-fill-color: transparent; properties, which are being applied to the label, might also be affecting the input fields.

To resolve the issue, you should modify the styles specifically for the placeholder and user input text

The issue you are facing is due to various reasons, and there's some beginner mistakes you are doing which I think you can improve.

I would recommend not to use -webkit-background-clip: text because this is experimental and it's not supported in some browsers. The other thing is when you are using Tailwind CSS, and go all out with it, it will improve your mastery over Tailwind. In your code, it is advisable never to warp label inside of input, although it will help when the user presses on the label input field get focused. The problem you are facing is because of these two CSS lines:

 -webkit-background-clip: text, -webkit-text-fill-color transparent;`

Here you will see that you already set background clip to text and its color to transparent. I slightly improved this, and I think you will get your satisfactory result:

<!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"></script>
  <style>
   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: white;
      margin-bottom: 5px;
    }
    span {
        -webkit-text-fill-color:transparent;

    }
    .input-box {
      background: rgba(255, 255, 255, 0.1);
      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;
}
  </style>
</head>
<body>
<div" id="addElementOverlay">
  <div id="addElementPopup" class="hidden">
    <div id="gridAEP" class="grid">
      <label>
        <span>Input 1</span>
        <input type="text" placeholder="Enter name here" class="input-box w-full" />
      </label>
      <label>
        <span>Input 2</span>
        <input type="number" placeholder="Enter tier here (1-5)" class="input-box w-full"/>
      </label>
      <label>
        <span>Input 3(Optional)</span>
        <input type="text" placeholder="Enter emoji representing name" class="input-box w-full"/>
      </label>
    </div>
  </div>
</div>
</body>
</html>

本文标签: overridingExpected outcome is not appearing because of some kind of CSS overiddanceStack Overflow