Das erwartete Ergebnis wird aufgrund einer CSS-Überschreibung nicht angezeigtCSS

CSS verstehen
Guest
 Das erwartete Ergebnis wird aufgrund einer CSS-Überschreibung nicht angezeigt

Post by Guest »

Ich bin Programmieranfänger und erstelle derzeit eine Website als persönliches Projekt. Ich lief reibungslos, aber dann kam es plötzlich zu einer unerwarteten Ausgabe und ich blieb stehen. Ich habe gerade den gesamten Code hinzugefügt, den ich für relevant halte.
Problem: Das Raster und alles darin fungiert als Popup. Das GridAEP fungiert als Popup über dem ursprünglichen Popup. Ich habe versucht, einige Eingabefelder hinzuzufügen, und hatte bereits ein Design, das ich an anderer Stelle im Projekt verwendete. Aber als ich das Klasseneingabefeld zur Eingabe hinzufügte, kam es zu unerwarteten Ausgaben.
Der Platzhaltertext ist orange+lila (sollte nur für Beschriftungen gelten), ebenso wie der Benutzereingabetext. Ich wollte, dass der Platzhalter und der Benutzereingabetext einfach weiß sind. Aber vor allem besteht das eigentliche Problem darin, dass beim Bewegen des Mauszeigers sowohl der Platzhaltertext als auch der vom Benutzer eingegebene Text einfach verschwinden, d. h. unsichtbar werden, obwohl er vorhanden ist (überprüft durch Auswahl von Text).
Erwartete Ausgabe: Ich hatte erwartet, dass es sich normal verhält. Der Hintergrund sollte die gleiche Farbe haben, aber der Platzhalter sollte weiß sein und der vom Benutzer eingegebene Text sollte ebenfalls weiß sein. Außerdem sollte der Text beim Bewegen des Mauszeigers nicht unsichtbar werden.
Ich habe den folgenden Code in einem Codetester getestet und das Problem besteht weiterhin. Hier finden Sie alle relevanten CSS- und HTML-Markups:

Code: Select all

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

Code: Select all





Test

Quick Reply

Change Text Case: 
   
  • Similar Topics
    Replies
    Views
    Last post