CodingAlarm
CodingAlarm

配合字体图标的搜索框

这里写图片描述


<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="">
            
            <input class="search-info iconfont" placeholder=" 请输入查询内容"/>
            <input class="search-btn" type="submit"/>
        form>
    div>
body>
html>

你可能感兴趣的:(web前端)