Question

我想设计一个带有图标的表单输入。当我单击该表单元素（：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>

Answer 1

看起来像是vs代码中的“实时服务器”存在问题，没有实时服务器就没有问题。

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

1 个答案: