JS 网易严选输入框的制作

傷城~ 2023-10-10 21:39 96阅读 0赞

最终效果如下图所示：

![ac7193e89b304d6cb71ed7e82cb6ed24.png][]

前置知识:iconfont图标库本地使用的方式

1. 进入阿里巴巴矢量图标库首页[https://www.iconfont.cn/![icon-default.png?t=N4N7][icon-default.png_t_N4N7]https://www.iconfont.cn/][https_www.iconfont.cn_icon-default.png_t_N4N7_icon-default.png_t_N4N7_https_www.iconfont.cn]

![d1425e60c26a4b28b7c397a91f802bbc.png][]

2. 选择任一图标库有

![47a08c5fe0694788b4b3ef56a050239c.png][]

3.选择你要使用的字体图标,点击加入购物车

![334c858fbba648c3a242b522fa9100f8.png][]

4. 点击右上角的购物车

![456a2b7f4fad455c9373c1ffc057602c.png][]

5.选择添加至项目

![ae994cc9610b4d94a8aa9df269b880a6.png][]

6.保存到项目跳转至该项目,下载至本地

![69ed4515fc7c4c57a1eccf8253de0027.png][]

7.将下载的文件解压缩,只需将下面的文件移入你的项目文件即可

![471e26d9d51e47c8b94044b2d6f5f8d3.png][]

8.在html文件中,即可正常使用了

具体实现代码如下

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8" />
            <meta http-equiv="X-UA-Compatible" content="IE=edge" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
            <title>Document</title>
            
            <link rel="stylesheet" href="./iconfont/iconfont.css" />
            <style>
                * {
                    padding: 0;
                    margin: 0;
                    box-sizing: border-box;
                }
                .container {
                    display: flex;
                    position: relative;
                    margin: 100px;
                }
                input {
                    width: 200px;
                    height: 30px;
                    padding-left: 30px;
                    border-top-left-radius: 25px;
                    border-bottom-left-radius: 25px;
                    border: 1px solid #cc9756;
                    border-right: none;
                }
                /* 取消输入框高亮 */
                input:focus {
                    outline: none;
                }
                .container::after {
                    content: '\eafe';
                    position: absolute;
                    top: 7px;
                    left: 10px;
                    font-family: 'iconfont' !important;
                    font-size: 16px;
                    font-style: normal;
                    color: #c9c9d1;
                }
                .search {
                    width: 100px;
                    height: 30px;
                    border-top-right-radius: 25px;
                    border-bottom-right-radius: 25px;
                    background: #cc9756;
                    text-align: center;
                    line-height: 30px;
                    color: white;
                }
            </style>
        </head>
        <body>
            <div class="container">
                <input type="text" placeholder="茅台" />
                <div class="search">搜索</div>
            </div>
        </body>
    </html>

达到的效果图如下：

![9ced420868bc4b0eb671b4326cdabe57.png][]

[ac7193e89b304d6cb71ed7e82cb6ed24.png]: https://img-blog.csdnimg.cn/ac7193e89b304d6cb71ed7e82cb6ed24.png
[icon-default.png_t_N4N7]: https://csdnimg.cn/release/blog_editor_html/release2.2.9/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=N4N7
[https_www.iconfont.cn_icon-default.png_t_N4N7_icon-default.png_t_N4N7_https_www.iconfont.cn]: https://www.iconfont.cn/
[d1425e60c26a4b28b7c397a91f802bbc.png]: https://img-blog.csdnimg.cn/d1425e60c26a4b28b7c397a91f802bbc.png
[47a08c5fe0694788b4b3ef56a050239c.png]: https://img-blog.csdnimg.cn/47a08c5fe0694788b4b3ef56a050239c.png
[334c858fbba648c3a242b522fa9100f8.png]: https://img-blog.csdnimg.cn/334c858fbba648c3a242b522fa9100f8.png
[456a2b7f4fad455c9373c1ffc057602c.png]: https://img-blog.csdnimg.cn/456a2b7f4fad455c9373c1ffc057602c.png
[ae994cc9610b4d94a8aa9df269b880a6.png]: https://img-blog.csdnimg.cn/ae994cc9610b4d94a8aa9df269b880a6.png
[69ed4515fc7c4c57a1eccf8253de0027.png]: https://img-blog.csdnimg.cn/69ed4515fc7c4c57a1eccf8253de0027.png
[471e26d9d51e47c8b94044b2d6f5f8d3.png]: https://img-blog.csdnimg.cn/471e26d9d51e47c8b94044b2d6f5f8d3.png
[9ced420868bc4b0eb671b4326cdabe57.png]: https://img-blog.csdnimg.cn/9ced420868bc4b0eb671b4326cdabe57.png