1

I have a simple login page in html with two textboxes and with icons in them. When I fill the textbox with autocomplete data, the icon hides and the textbox color becomes yellow. Why is that happening. Please help me ?

Here's the snapshot of the login page:

enter image description here

enter image description here



Here's the 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/ ..here's the jsfiddle of the same but it doesn't have any images.

Steve
  • 522
  • 3
  • 12
  • 28
  • This may help --> https://stackoverflow.com/questions/2781549/removing-input-background-colour-for-chrome-autocomplete – sol Dec 11 '17 at 10:54
  • that just changes the textbox background color to white and removes the image – Steve Dec 11 '17 at 10:58
  • It's better to create a new span class for your icon. Because even you change auto-fill still your icon will be change. Or better do autocomplete="off" for your inputbox – Carlvic Lim Dec 11 '17 at 11:30

1 Answers1

0

We should use bootstrap to solve this. Check This:

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

I hope This would be helpful. https://v4-alpha.getbootstrap.com/components/input-group/

The JsFiddle link is : https://jsfiddle.net/6ugek6qw/

V5NEXT
  • 1,907
  • 4
  • 19
  • 38