css Question posted in
Some basic documentation can be found here.

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:

    <!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>
       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;
    }
      </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>
Tags:

3

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
  3. 0 
    <!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>
   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>

    Issue you are facing due to various reasons and there’s some beginner mistake you are doing which i think you can improve. i would recommend not to use -webkit-background-clip: text cause this is experimental and it’s not supported in some browser,other thing is when You are using tailwind Css the go all out with it, it will improve Your mastery over tailwind. In Your code it is advisable never warp label inside input although it will help when user press on label input feild get focused and the problem you are facing because of these 2 css code -webkit-background-clip: text, -webkit-text-fill-color transparent; here if u see u already set backgeound clip to text and it’s color to transparant,i slightly improved and i think u will get your satisfactory result.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search