Heim >Web-Frontend >HTML-Tutorial >So entfernen Sie den Hintergrund eines ausgewählten Eingabefelds in CSS
So entfernen Sie den Hintergrund eines ausgewählten Eingabefelds in CSS
- 王林nach vorne
- 2023-08-27 19:01:18806Durchsuche
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.
Verschiedene Eingabefelder in CSS
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>Das zweite, was wir wissen müssen, ist der „
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>
Im obigen Beispiel haben wir dem Select-Tag einen Namen und eine ID bereitgestellt, um es nach der Übermittlung durch den Benutzer zu verweisen, während das ID-Attribut für den Zugriff auf die Daten verwendet wird, die nach der Übermittlung gesendet werden Für die Optionen, die der Benutzer auswählen kann, verwenden wir das Option-Tag. Wir können auch mehrere andere Attribute verwenden, um die Liste zugänglicher und eindeutiger zu machen Die chinesische Übersetzung von
Beispiellautet:
BeispielIm folgenden Beispiel können wir –webkit-appearance: none verwenden, um den Hintergrund vollständig zu entfernen.
<!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>
Wie wir bereits erkennen können, ist die visuelle Ausgabe des obigen Beispiels anders und enthält nicht die standardmäßige gräuliche Hintergrundfarbe. Ein weiterer unintuitiver Ansatz wäre, danach ein 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
In diesem Artikel werden Lösungen für das Problem des Entfernens des Eingabehintergrunds in CSS erläutert. Unterwegs lernten wir etwas über Eingabefelder, ihre Typen, ihre Standardstile und ihren Status. Wir haben auch gelernt, wie man Pseudoklassenselektoren verwendet, um spezielle Zustände von Elementen anzusprechen.
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!