Question

我在html中有一个简单的登录页面，其中包含两个文本框并带有图标。当我使用自动填充数据填充文本框时，图标隐藏，文本框颜色变为黄色。为什么会这样。请帮我？

这是登录页面的快照：

这是代码：

<!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/这是相同的jsfiddle，但它没有任何图像。

Answer 1

我们应该使用bootstrap来解决这个问题。检查一下：

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

为什么自动填充会删除文本框图像

1 个答案: