Wie kann ich das automatische Ausfüllen und die Eingabehervorhebung des Browsers mit HTML und CSS überschreiben?

Überschreiben des automatischen Ausfüllens von Formularen und der Hervorhebung von Eingaben mithilfe von HTML/CSS

Bei der Webentwicklung kann das Entfernen von browsergenerierten Vorschlägen zum automatischen Ausfüllen und Hervorheben von Eingaben problematisch sein, insbesondere beim Umgang mit mit mehreren Formularen auf derselben Seite. Dieser Artikel befasst sich mit beiden Problemen und bietet eine Lösung zum Überschreiben des automatischen Ausfüllens und zum Entfernen der gelben Hintergrundhervorhebung.

Automatisches Ausfüllen:

Browser schlagen automatisch zuvor eingegebene Informationen vor Eingabefelder. Obwohl es für einige Benutzer praktisch ist, kann es ein Problem sein, wenn verschiedene Formulare auf derselben Seite nicht automatisch ausgefüllt werden sollen. Um das automatische Ausfüllen für bestimmte Eingaben zu deaktivieren, verwenden Sie das Autocomplete-Attribut:

<form>
  <input type="text" name="username" autocomplete="off">
  <input type="password" name="password" autocomplete="off">
  <input type="submit" value="Submit">
</form>

Eingabehervorhebung:

Standardmäßig wenden Browser einen gelben Hintergrund an, wenn ein Eingabefeld angezeigt wird ist fokussiert. Dieses Verhalten kann mit CSS überschrieben werden. Die Pseudoklasse :focus zielt auf jedes Element ab, das derzeit im Fokus ist. So entfernen Sie die gelbe Hervorhebung mithilfe von CSS:

input:focus {
  background-color: transparent;
}

Beachten Sie jedoch, dass diese Lösung in den neuesten Versionen von Chrome nicht mehr funktioniert. Verwenden Sie stattdessen den folgenden Hack:

input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 50px white inset; /* Change the color to your own background color */
  -webkit-text-fill-color: #333;
}

input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 50px white inset;/*your box-shadow*/
  -webkit-text-fill-color: #333;
} 

Das obige ist der detaillierte Inhalt vonWie kann ich das automatische Ausfüllen und die Eingabehervorhebung des Browsers mit HTML und CSS überschreiben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!