Der Standardstil von HTML-Formularelementen kann oft etwas langweilig und einfallslos sein. Ein Element, das häufig Designverbesserungen erfordert, ist das Eingabefeld auswählen, das verwendet wird, um dem Benutzer eine Liste mit Optionen zur Auswahl zu präsentieren. In diesem Artikel zeigen wir Ihnen, wie Sie den Standardhintergrund eines Auswahleingabefelds mithilfe von CSS entfernen.
Auf diese Weise können Sie das Erscheinungsbild Ihrer ausgewählten Eingabe anpassen, um sie optisch ansprechender und konsistenter mit dem Gesamtdesign Ihrer Website oder App zu machen.
Lassen Sie uns zunächst die Grundkenntnisse verstehen, die wir benötigen, bevor wir mit der Lösung dieses Problems fortfahren. Das erste, was wir wissen müssen, ist, welche Eingaben auf einer Webseite der Benutzer vornehmen kann Das Eingeben und Senden von Daten wird auf einer Website als Eingabefeld bezeichnet
In HTML stehen verschiedene Eingabearten zur Verfügung. Zum BeispielTextbereich, Optionsfeld, Option auswählen und mehr. Jede Eingabe hat einen anderen Standardstil. In vielen Fällen müssen wir benutzerdefinierte Stile verwenden, um unserer Website Wirkung zu verleihen und sie von anderen Websites abzuheben.
Beispiele für einige gängige Eingabefelder, die auf Websites verwendet werden, sind unten aufgeführt.
<form action="someAction"> <label for="YourName">Your First name:</label> <input type="text" id="YourName" name="YourName"><br><br> <label for="YourLastName">Your Last name:</label> <input type="text" id="YourLastName" name="YourLastName"><br><br> <input type="submit" value="Submit"> </form>
Status“ dieser Eingaben. Immer wenn wir mit dem Eingabefeld interagieren, um Daten einzugeben, wird das Eingabefeld als „aktiv“-Zustand bezeichnet. Wenn das Eingabefeld jedoch nicht berührt wird, wird es als „inaktiv“-Zustand bezeichnet. Ein anderer Begriff, der verwendet wird, um sie zu beschreiben, sind die Zustände „fokussiert“ und „unfokussiert“. Standardmäßig sind alle Eingaben nicht fokussiert.
Jetzt können wir mit der Lösung dieses Problems beginnen. CSS stellt uns verschiedene „Pseudo-Klassen“ zur Verfügung, um auf unterschiedliche oder spezielle Zustände bestimmter Eingabefelder abzuzielen. Eine der Klassen ist die Fokus-Pseudoklasse. Es wird auf Elemente angewendet, die sich auf der Website im Status „fokussiert“ befinden, d. h. der Benutzer interagiert mit dem Element, indem er mit der Tastatur oder der Maus darauf klickt. Wir werden diese Pseudoklasse nutzen, um den Eingabehintergrund zu entfernen, wenn der Fokus aktiviert ist. Dazu ändern wir den Standardstil, um unser Ziel zu erreichen.
Dies funktioniert jedoch nur für vom Benutzer eingegebene Eingabetypen. Websites enthalten häufig Dropdown-Listen, die eine Liste bereits vorhandener Optionen enthalten, und der Benutzer kann eine oder mehrere aus der vorgegebenen Liste auswählen.Wie andere Eingabeformulare ist es auch ein Eingabefeld und verfügt über einen damit verbundenen Standardstil. Wir können eine benutzerdefinierte Dropdown-Liste mit dem Select-Tag in HTML erstellen. Es wird hauptsächlich zum Sammeln von Benutzerdaten in Formularen verwendet. Unten finden Sie ein Beispiel für eine Dropdown-Liste mit dem Select-Tag. Beispiel
<!DOCTYPE html>
<html lang="en">
<head>
<title>Select Without background</title>
</head>
<body>
<form id="contactForm" method="POST" action="">
<label for="movies">Which movie would you like to see?</label>
<select name="movies" id="movies">
<option value="a">Movie A</option>
<option value="b">Movie B</option>
<option value="c">Movie C</option>
<option value="d">Movie D</option>
</select>
<br />
</form>
</body>
</html>
Die chinesische Übersetzung von
Beispiel
<!DOCTYPE html>
<html lang="en">
<head>
<title>Select Without background</title>
<style>
.form-control:focus,
.form-control:active {
background: transparent;
}
#movies,
#movies:focus,
#movies:active {
background: none;
-webkit-appearance: none;
}
</style>
</head>
<body>
<form id="contactForm" method="POST" action="">
<input
name="YourName"
type="text"
class="someClass"
placeholder="Can you please tell me your name :)"
required
/>
<br />
<input
name="YourEmail"
type="email"
class="someClass"
placeholder="Your email please :)"
/>
<br />
<label for="movies">Which movie would you like to see?</label>
<select name="movies" id="movies">
<option value="a">Movie A</option>
<option value="b">Movie B</option>
<option value="c">Movie C</option>
<option value="d">Movie D</option>
</select>
<br />
</form>
</body>
</html>
div als Container für das Auswahlfeld zu verwenden Legen Sie eine Breitenbeschränkung fest, blenden Sie den Überlauf aus und lassen Sie die Breite des Auswahlfelds etwas kleiner als die des Containers div sein. Auf diese Weise verschwindet der standardmäßig gestaltete Pfeil von der Webseite.
Bitte beachten Sie, dass die meisten Entwickler im Gegensatz zur Positionierung einzelner Labels, wie in diesem Artikel beschrieben, IDs und Klassen verwenden, um gemeinsame Stile zu erstellen, sodass in ähnlichen Situationen kein Code wiederholt werden muss.Fazit
Das obige ist der detaillierte Inhalt vonSo entfernen Sie den Hintergrund eines ausgewählten Eingabefelds in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
So schließen Sie Port 445 in XP
So verwenden Sie die Print()-Funktion in Python
Lösung für die Meldung „Ungültige Partitionstabelle' beim Start von Windows 10
So erstellen Sie eine GIF-Animation in PS
CSS-Hintergrundcode-Sammlung
Maßnahmen zur Speicherung der Datenverschlüsselung
So überprüfen Sie tote Links auf Websites
Der Unterschied zwischen Server und Cloud-Host
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
