焦点时表单输入图标消失答案

【问题标题】：icon of form input disappear when focus焦点时表单输入图标消失
【发布时间】：2019-04-03 10:16:17
【问题描述】：

我想设计一个带有图标的表单输入。当我单击此表单元素（：focus）时，该图标会消失，我希望图标始终可见。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
        <style>
            * {
                box-sizing: border-box;
                padding: 0;
                margin: 0;
            }
            html,body {height: 100%;}
            input {
                width: 400px ;
                height: 4em;
                border: none ;
                padding: 1em 0 1em 2em ;
                color: black;
                background: url('https://www.bluebadgeinsurance.com.au/wp-content/uploads/multi-user-icon.png') left center no-repeat ;
                background-size: 30px 30px ;
            }
        </style>
    </head>
    <body>
        <form name="myForm">
            <input type="text" name="username" placeholder="username">
        </form>
        <script>
        </script>
    </body>
    </html>

【问题讨论】：

我没有显示图标在焦点上消失。但是，当我在表单中输入一个值时它就会消失 - 这就是你在说的吗？如果是这样，则无法解决此问题，因为值会更改表单。您需要将图像放在表单之外。

标签： html css forms focus

【解决方案1】：

看起来它是来自 vs-code 的“实时服务器”的问题，没有实时服务器就没有问题。

【讨论】：

您应该将此标记为解决问题的答案以关闭问题。