Warum Autocomplete Textbox Bild entfernt

Ich habe eine einfache Login-Seite in HTML mit zwei Textfelder und mit Symbolen in ihnen. Wenn ich das Textfeld mit Autocomplete-Daten ausfülle, wird das Symbol ausgeblendet und die Textboxfarbe wird gelb. Warum passiert das? Bitte hilf mir ?Warum Autocomplete Textbox Bild entfernt

Hier ist die Momentaufnahme der Login-Seite:

Hier ist der Code:

<!DOCTYPE html> 
<html> 
<head> 
<link href="css/main.css" rel="stylesheet"/> 
</head> 
<body style="background-color:#f5f5f5;font-family:Tahoma;" 

<div class="login_div"> 
    <div style="height:20px;width:240px;background-color:#00b300;"><span style="color:white;margin-left:10px">Secure Login</span></div> 
    <form id="frm" action="check_login.php" method="post"> 
     <input class="in_box1" name="username" type="text" placeholder="Username/Email" title="Enter Username or Email" maxlength="20" required> 
     <input class="in_box2" name="password" type="password" placeholder="Password" title="Enter Password" maxlength="10" required> 
     <input style="margin-left:25px;font-size:15px;" type="checkbox" title="Enter Password"> 
     <span style="font-size:14px;">Remember Me</span><br> 
     <input class="in_btn" type="submit" value="Login"> 
    </form> 
</div> 


</body> 
</html>

https://jsfiddle.net/8v21wmbf/1/ ..hier ist die jsfiddle des gleichen, aber es hat keine Bilder.

Quelle

2017-12-11 Steve

Dies kann helfen -> https://stackoverflow.com/questions/2781549/removing-input-background-colour-for-chrome-autocomplete – sol

, die gerade Ändert die Textbox-Hintergrundfarbe in Weiß und entfernt das Bild – Steve

Es ist besser, eine neue Spannungsklasse für Ihr Symbol zu erstellen. Da selbst die automatische Füllung geändert wird, ändert sich das Symbol. Oder besser Autocomplete = "aus" für Ihre Eingabebox –

Wir sollten Bootstrap verwenden, um dies zu lösen. Dieses Check:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
<form id="frm" action="check_login.php" method="post"> 
    <div class="input-group"> 
     <span class="input-group-addon">(your icon)</span> 
     <input class="in_box1" name="username" type="text" 
     placeholder="Password" title="Enter Username or Email" maxlength="20" 
     required/> 
    </div> 
    <div class="input-group"> 
     <span class="input-group-addon">(your icon)</span> 
     <input class="in_box2" name="password" type="password" placeholder="Password" 
     title="Enter 
     Password" maxlength="10" required/> 
    </div> 
</form>

Ich hoffe, das wäre hilfreich. https://v4-alpha.getbootstrap.com/components/input-group/

Der JsFiddle Link lautet: https://jsfiddle.net/6ugek6qw/

Quelle

2017-12-11 11:20:16 V5NXT

können Sie eine jsfiddle für das gleiche erstellen? – Steve

Ich habe die Geige hinzugefügt. – V5NXT

Nicht bekommen, was ich suchte, aber die Antwort für andere Lösung zu akzeptieren und etwas Neues zu lernen !! – Steve

Warum Autocomplete Textbox Bild entfernt

Antwort

Verwandte Themen