javascript - 为什么自动完成会删除文本框图像

标签 javascript html css autocomplete

我有一个简单的 html 登录页面,其中有两个文本框和图标。当我用自动完成数据填充文本框时,图标隐藏并且文本框颜色变为黄色。为什么会这样。请帮我 ?

这是登录页面的快照:

enter image description here

enter image description here



代码如下:

<!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,但它没有任何图像。

最佳答案

我们应该使用 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/

关于javascript - 为什么自动完成会删除文本框图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47751264/

相关文章:

HTML 和 CSS 没有链接/通信

javascript - 为什么 'new Promise(...)' 返回 'undefined' ?

javascript - 让 Select2 Gem 与 A​​ctiveAdmin "Add New"按钮一起使用

javascript - 如何读取伪元素:before using Javascript?的height或width属性

javascript - 拖放时清除 jQuery data()

javascript - "Pointless button"不会更改文本

javascript - Mopub 移动网络/javascript 实现调整文本大小/覆盖 CSS

CSS关键帧动画边框问题

javascript - 为什么 webpack 在打包时不包含assert.rejects(UMD 库目标)

css - 添加 float :left to div makes child link not clickable