配合字体图标的搜索框

最新推荐文章于 2022-08-19 18:57:12 发布

CodingAlarm

最新推荐文章于 2022-08-19 18:57:12 发布

阅读量1.8k

点赞数

分类专栏： web前端文章标签：搜索框字体图标阿里字体图标

本文链接：https://blog.csdn.net/CodingAlarm/article/details/51907124

版权

web前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

这里写图片描述

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