Início / coding / Perguntas / 79349441
Accepted
Shubhadeep Roy
Asked: 2025-01-12 14:22:30 +0800 CST

O resultado esperado não está aparecendo devido a algum tipo de substituição de CSS

  • 772

Sou um programador iniciante e atualmente estou criando um site como um projeto pessoal. Eu estava indo bem, mas de repente uma saída inesperada aconteceu e eu parei no meu caminho. Acabei de adicionar todo o código que acredito ser relevante.

Problema: a grade e tudo dentro dela agem como um pop-up. O gridAEP age como um pop-up em cima do pop-up inicial. Eu estava tentando adicionar algumas caixas de entrada, e eu já tinha um design que estava usando em outro lugar no projeto. Mas quando adicionei a classe input-box à entrada, ocorreram saídas inesperadas.

O texto do placeholder é laranja+roxo (deve ser aplicado somente a rótulos) e o texto de entrada do usuário também. Eu queria que o placeholder e o texto de entrada do usuário fossem brancos. Mas, acima de tudo, o problema real é que, quando passado o mouse, tanto o texto do placeholder quanto o texto de entrada do usuário simplesmente desaparecem, como se ficassem invisíveis, mesmo estando lá (verificado ao selecionar o texto).

Saída esperada: Eu esperava que ele se comportasse normalmente. O fundo deve ser da cor que é, mas o placeholder deve ser branco e o texto inserido pelo usuário também deve ser branco. Além disso, o texto não deve ficar invisível quando pairado.

Testei o código abaixo em um testador de código e o problema ainda persiste. Aqui estão todas as marcações CSS e HTML relevantes:

 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

3 respostas

  1. Best Answer

    O problema que você está enfrentando provavelmente é devido à labeltag que envolve o campo de entrada. Para corrigir o problema e obter a saída esperada, recomendo separar as tags labeland input. Aqui está um exemplo em que coloquei cada um labele inputdentro de seu próprio divcontêiner para melhor controle de layout

    <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>
    • 2

  2. O problema que você está enfrentando parece estar relacionado à maneira como a classe input-box está aplicando estilos que estão afetando tanto o placeholder quanto o texto de entrada do usuário. Especificamente, as propriedades -webkit-background-clip: text; e -webkit-text-fill-color: transparent;, que estão sendo aplicadas ao rótulo, também podem estar afetando os campos de entrada.

    Para resolver o problema, você deve modificar os estilos especificamente para o espaço reservado e o texto de entrada do usuário

    • -1

  3. O problema que você está enfrentando se deve a vários motivos, e há alguns erros de iniciante que você está cometendo e que acho que você pode melhorar.

    Eu recomendaria não usar -webkit-background-clip: textporque isso é experimental e não é suportado em alguns navegadores. A outra coisa é quando você está usando Tailwind CSS, e vai com tudo, isso vai melhorar seu domínio sobre Tailwind. No seu código, é aconselhável nunca warp labeldentro de input, embora isso ajude quando o usuário pressiona no campo de entrada do rótulo para obter foco. O problema que você está enfrentando é por causa dessas duas linhas CSS:

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

    Aqui você verá que já definiu o background clip para texte sua cor para transparent. Eu melhorei um pouco isso, e acho que você obterá seu resultado satisfatório:

    <!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>

    • -1

relate perguntas