Problem mit dem Layout meiner Input-Felder

[claus ginsel]

Moin

bisher dachte ich, mein Problem wäre kein Problem, sondern nur eine spezielle Verhaltensweise meines Browsers auf dem Galaxy, dem Samsung Browser.

Auf dem Desktop, da sowohl im Edge als auch im Firefox, sieht das alles ok aus, bis auf eine Kleinigkeit.

Der Reihe nach:

Ich hatte heute diese Seite, aus der der Ausschnitt stammt auf mit meinem Galaxy, und da fiel mir auf, dass das Verhalten der Input-Felder anders war als bei meiner Seite.

So sieht das bei meiner Seite aus, wenn das Feld nicht den Focus hat, so wie es auch aussehen soll:

Klicke ich da rein, dann passiert folgendes, Das Feld wird schmaler und der Text wird größer:

Hinzu kommt, dass wenn ich aus den Browservorschlägen auswähle, der Hintergrund blau eingefärbt wird:

Übrigens färbt auch Edge den Hintergrund blau ein nach Auswahl aus den Vorschlägen.

Das beides find ich blöd. Mit dem 1. Bild wird jetzt aber deutlich, dass mein CSS verantwortlich ist. Ich hab allerdings keine Ahnung, in welcher Richtung ich hier suchen soll.

Das mit dem "springen" des Input-Feldes würde ich irgendwie auf meine CSS-Weiche hinsichtlich der Auflösung des Screen verorten.

Hier mal mein html:

<label>&nbsp;&nbsp;&nbsp;
	<span class="i_span">&nbsp;Nutzername&nbsp;</span><br>
	<input name="input_nutzer" class="i_input" type="text" pattern="(^[a-zA-Z0-9äöüß\-]{3,20}$)" title="Nutzername" size="40" maxlength="20" required>
</label>

und das css dazu:

@media (min-resolution: 151dpi) and (orientation: landscape) {
/* box ist der body */
	#box {position:relative; width:80%; margin-right:auto; margin-left:auto;}
	input[type=text] {width:70%;}
}
@media (min-resolution: 151dpi) and (orientation: portrait) {
	#box {position:relative; width:90%; margin-right:auto; margin-left:auto;}
	input[type=text] {width:100%; }
}
/*Monitore von PCs, das A8 Tablet */
@media (max-resolution: 150dpi) and (orientation: landscape) {
	#box {position:relative; width:60%; margin-right:auto; margin-left:auto;}
	input[type=text] {width:50%;}
}
/* das A8 Tablet */
@media (max-resolution: 150dpi) and (orientation: portrait) {
	#box {position:relative; width:90%; margin-right:auto; margin-left:auto;}
	input[type=text] {width:80%;}
}

.i_input {
	background-color:white;
	box-sizing: border-box;
	height: 47px; 
	font-size:1.3em; 
	border: 3px solid #aaaaaa; 
	padding-left: 20px;
	border-radius: 8px;
	width:100%;}
.i_input:valid {color: #333333;}
.i_input:invalid {color: red;}
.i_span {
		background-color:white;
	margin-left:-26px; /* neu */	
	position:relative;
	top: 9px;
	font-size:1em; 
	color: #aaaaaa; 
	font-weight: bolder;}

Habt ihr vielleicht eine Idee?

Gruß Claus