なぜオートコンプリートでテキストボックスイメージが削除されるのですか

htmlの2つのテキストボックスとアイコンを持つ簡単なログインページがあります。テキストボックスにオートコンプリートデータを入力すると、アイコンが非表示になり、テキストボックスの色が黄色に変わります。なぜそれが起こっているのですか？私を助けてください？ここでなぜオートコンプリートでテキストボックスイメージが削除されるのですか

は、ログインページのスナップショットです：

ここでは、コードです：

<!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/ ..同じものがありますが、画像はありません。

出典

2017-12-11 Steve

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

それだけテキストボックスの背景色を白に変更し、画像を削除します – Steve

アイコンの新しいスパンクラスを作成する方が良いでしょう。オートフィルを変更しても、アイコンが変更されるためです。また、入力ボックスにautocomplete = "off"を設定すると、 –

これを解決するにはブートストラップを使用する必要があります。これを確認してください：

<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>

私はこれが役に立ちます。 https://v4-alpha.getbootstrap.com/components/input-group/

JsFiddleリンクがある：これは役立つかもしれ https://jsfiddle.net/6ugek6qw/

出典

2017-12-11 11:20:16 V5NXT

同じようにjsfiddleを作成できますか？ – Steve

私はフィドルを追加しました。 – V5NXT

私が探していたものが手に入りませんでしたが、他の解決策や新しい学習のための答えを受け入れることができました！ – Steve

なぜオートコンプリートでテキストボックスイメージが削除されるのですか

答えて

関連する問題