Probleme mit Input-Elementen im Chrome Browser

29.03.2024 09:37
#1 Probleme mit Input-Elementen im Chrome Browser
avatar
Mitglied

Ich habe Probleme mit den Input-Elementen im Chrome Browser festgestellt. Während mit Firefox alles bestens funktioniert, werden die Eingabefelder im Chrome-Browser anders als vorgesehen dargestellt. Die Input-Elemente reagieren nicht auf meine Style-Anweisungen im CSS. Auch meine Versuche mit einer Browser-spezifischen CSS laufen ins Leere:

1
2
3
4
 
input {
-webkit-background-color: #000000;
}
 
 



Im Chrome bleiben die Eingabefelder weiß und auch die Schriftart ist eine ganz andere. Nur wenn man in das Feld reinklickt, wird die gewünschte Schriftart angezeigt.

So sieht es im Firefox aus:


Und so im Chrome:


Nur das Emailfeld wird im Chrome korrekt dargestellt, was ich nicht verstehe, denn dafür gelten dieselben CSS-Regeln wie für die anderen Eingabefelder


 Antworten

 Beitrag melden
29.03.2024 09:44 (zuletzt bearbeitet: 29.03.2024 09:44)
avatar  creator
#2 RE: Probleme mit Input-Elementen im Chrome Browser
cr
Mitglied

Link: https://www.forum-ki.net/anmeldung.php

Zitat von Cyborg_Christina im Beitrag #1
so im Chrome

Du zeigst zwei Felder, die von deinem Passwort-Manager ausgefüllt wurden.

Bei mir mit Chrome unter macOS wird alles richtig dargestellt.


 Antworten

 Beitrag melden
29.03.2024 09:59
#3 RE: Probleme mit Input-Elementen im Chrome Browser
avatar
Mitglied

Was bedeutet das konkret? Den Passwort-Manager gibt es doch in allen Chrome-Browsern, dann wäre das doch auch bei anderen Seitenbesuchern so wie bei mir, oder? Zumindest mit Windows? Kann man da irgendwas tun, damit das einheitlich dargestellt wird?

In Deinem Screenshot fällt auf, dass die Schriftart "Oswald" nicht dargestellt wird. Oder liegt es daran, dass Du die Cookies deaktiviert hast?


 Antworten

 Beitrag melden
29.03.2024 10:09 (zuletzt bearbeitet: 29.03.2024 10:21)
#4 RE: Probleme mit Input-Elementen im Chrome Browser
avatar
Mitglied

Habe versucht, den Stil des Passwort-Managers zu überschreiben, das hilft leider auch nicht:

1
2
3
4
5
6
 

input:-webkit-autofill{
background-color: rgba(127, 174, 202, .5) !important;
 
}
 
 



Weiterhin habe ich versucht, das automatische Auffüllen mit einem kleinen Script zu umgehen, aber das funktioniert auch nicht. Ist scheinbar von Google nicht gewollt.


 Antworten

 Beitrag melden
29.03.2024 19:10 (zuletzt bearbeitet: 29.03.2024 19:10)
avatar  creator
#5 RE: Probleme mit Input-Elementen im Chrome Browser
cr
Mitglied

Zitat von Cyborg_Christina im Beitrag #4
Habe versucht, den Stil des Passwort-Managers zu überschreiben

Über box-shadow scheint es zu funktionieren.

1
2
3
4
5
6
 
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active{
-webkit-box-shadow: 0 0 0 90px white inset !important;
}
 


https://stackoverflow.com/a/14205976

Zitat von Cyborg_Christina im Beitrag #3
In Deinem Screenshot fällt auf, dass die Schriftart "Oswald" nicht dargestellt wird.

Ich habe einen Cookie-Banner-Blocker aktiv und damit den Cookie-Banner, der die Fonts lädt, nie akzeptiert.


 Antworten

 Beitrag melden
29.03.2024 20:03
#6 RE: Probleme mit Input-Elementen im Chrome Browser
avatar
Mitglied

Danke für Deine Hilfe, aber bei mir funktioniert es leider nicht.


 Antworten

 Beitrag melden
29.03.2024 20:10
avatar  creator
#7 RE: Probleme mit Input-Elementen im Chrome Browser
cr
Mitglied

Hast du das "white" in Beitrag #5 mit der entsprechenden Farbe ausgetauscht? Ich sehe bei dir im CSS-Code nichts mit "autofill" im Selektor.


 Antworten

 Beitrag melden
29.03.2024 20:59
#8 RE: Probleme mit Input-Elementen im Chrome Browser
avatar
Mitglied

Hatte Deinen CSS-Eintrag falsch verstanden. Habe nun die Farbe ersetzt, jetzt funktioniert es, danke.


 Antworten

 Beitrag melden
29.03.2024 22:21 (zuletzt bearbeitet: 29.03.2024 22:22)
#9 RE: Probleme mit Input-Elementen im Chrome Browser
avatar
Mitglied

Seltsamerweise wirkt sich der Code auch auf Firefox aus, obwohl die webkit.extension nur für Chrome gilt, dachte ich. Aus bestimmten Gründen muss ich den Eintrag jetzt erstmal entfernen und morgen mal darüber nachdenken.
Liegt wahrscheinlich daran, ich im Firefox auch einen Passwort-Manager nutze.


 Antworten

 Beitrag melden
Bereits Mitglied?
Jetzt anmelden!
Mitglied werden?
Jetzt registrieren!