配合字体图标的搜索框

来源：互联网发布：华硕笔记本游戏优化编辑：程序博客网时间：2024/06/06 09:22

这里写图片描述

<!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>

0 0