Ожидаемый результат не отображается из-за какого-то перебора CSS. ⇐ CSS

[Anonymous]

Я начинающий программист и сейчас создаю веб-сайт в качестве личного проекта. Я шел плавно, но вдруг случился неожиданный разворот и я остановился на своих рельсах. Я только что добавил весь код, который считаю нужным.
Проблема: сетка и все внутри действует как всплывающее окно. GridAEP действует как всплывающее окно поверх первоначального всплывающего окна. Я пытался добавить несколько полей ввода, и у меня уже был дизайн, который я использовал в другом месте проекта. Но когда я добавил поле ввода класса к входным данным, произошли неожиданные результаты.
Текст-заполнитель имеет оранжевый+фиолетовый цвет (должен применяться только к меткам), как и текст, вводимый пользователем. Я хотел, чтобы заполнитель и вводимый пользователем текст были просто белыми. Но больше всего реальная проблема заключается в том, что при наведении курсора и текст-заполнитель, и текст, вводимый пользователем, просто исчезают, как будто становятся невидимыми, даже если они есть (проверяется путем выбора текста).
Ожидаемый результат: я ожидал, что он будет вести себя как обычно. Фон должен быть того же цвета, но заполнитель должен быть белым, а текст, вводимый пользователем, также должен быть белым. Кроме того, текст не должен становиться невидимым при наведении курсора.
Я проверил приведенный ниже код в тестере кода, и проблема все еще сохраняется. Вот вся необходимая разметка CSS и HTML:





Test


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;
}






Input 1
Input 2
Input 3(Optional)








Подробнее здесь: https://stackoverflow.com/questions/793 ... veriddance