配合字体图标的搜索框

关注

原创最新推荐文章于 2026-08-15 12:12:48 发布 1.9k 阅读 AI 写同款· GEO 优化 ›

小米商城网页制作大全之搜索引擎(input,Font Awesome) 导读：原来的自己大多时候是通过视频和书本资料自学，很少有动手实践，也就会有眼高手低的毛病，每次做一个小功能来练手的时候都会遇到各式各样的问题，也正是在想方设法解决这些问题的过程中收获是最大的，不仅是解决问题的能力，更重要的是学习这些的兴趣会更浓，坚持下去的动力更足。小米网页的搜索框是通过input标签实现，右边搜索图标使用Font Awesome图标实现，鼠标悬停背景色变为小米主流颜色黄色这些... 阅读详情

这里写图片描述

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="iconfont/iconfont.css"/>
    <style>
        *{ margin:0px; padding:0px;}
        /*表单*/
        .search-box form{ width:360px; height: 30px; margin:100px auto;}
        /*输入框*/
        .search-info {
            border: 1px solid #07d469;
            color: #999999;
            text-indent: 10px;
            height: 28px;   /*input中的text高不包含边，并且会有1padding的值，padding值上面已经去掉，所以这高是除了边的高*/
            float: left;
            outline:none;
        }
        /*提交按钮*/
        .search-btn{
            width:40px; height: 30px;
            background:#07d469;
            border:none;
            float: left;
            outline:none;  /*去掉获取焦点时的蓝色框*/
            color:#fff;
            font-size:16px;
            cursor: pointer;  /*鼠标形状变为小手*/
        }
    </style>
</head>
<body>
    <div class="search-box">
        <form name="">
            <!--placeholder是字体图标的编码，此例子需要引入阿里字体图标-->
            <input class="search-info iconfont" placeholder="&#xe672; 请输入查询内容"/>
            <input class="search-btn" type="submit"/>
        </form>
    </div>
</body>
</html>