网页搜索框实现

作者: Game0ver | 来源:发表于2018-12-05 13:19 被阅读0次

网页搜索框实现
网页制作-搜索框
提高你办公效率的冷门软件
【javaweb】搜索框跳转百度搜索
Servlet+Ajax
百度语音搜索
网页和网页结构学习（HTML）
JZBigData - PageRank
强势围观！JS仿智能搜索究竟有多牛逼？
Vuetify 实现搜索框

趁着热情未减，赶紧的写下自己的第一篇简书。今天要分享的是如何利用 html + css 写出一个令自己满意的搜索框。说来忏愧，刚学 html 的时候，被这个问题困惑了许久，一直未得到解决。

下面是基本思路：
首先定义一个 div 来包住 input 和 button，然后给 div 一个边框，input 和 button 均设为无边框，随后利用相对定位把 button 定位到 div 的最右端，然后便可以得到下图的效果了：

效果图

下面附上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的搜索页</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }

        /* 名称 */
        .title{
            text-align: center;
            font-size: 25px;
            font-weight: bold;
            color: cadetblue;
            margin-top: 100px;
            margin-bottom: 20px;
            font-family: fantasy;
        }

        /* 下面是搜索框样式 */
        .searchBox{
            width: 40%;
            height: 35px;
            border: 1px solid cadetblue;
            outline: hidden;
            border-radius: 2px;
            margin: 0 auto;
            position: relative;
        }

        .inputBox{
            border: none;
            width: 84%;
            height: 35px;
            line-height: 35px;
            outline: none;
            padding-left: 10px;
            /* 改变光标的颜色 */
            caret-color:#008B8B;
            font-size: 14px;
        }

        .searchBtn{
            width: 65px;
            height: 35px;
            border: none;
            position: absolute;
            right: 0;
            outline: none;
            color: white;
            font-size: 15px;
            background-color: cornflowerblue;
        }

        /* 鼠标滑过按钮时背景色改变 */
        .searchBtn:hover{
            background-color: #497fdf;
        }
    </style>
</head>
<body>
<div class="title">
    <p>I &nbsp;tell&nbsp; you</p>
</div>
<div class="searchBox">
    <input class="inputBox" placeholder="I will tell you all you want to know!">
    <button class="searchBtn">搜索</button>
</div>
</body>
</html>

2018-12-7 增加了改变光标样式样式和鼠标滑过搜索按钮时背景色改变功能