用HTML和CSS实现搜索框

文章目录前言1.style样式2.body部分3.效果图前言用html和css实现简单的搜索框1.style样式代码如下（示例）：<style>* {box-sizing: border-box;/*宽度和高度会包括内边距和边框*/}div.search {padding: 10px 0;}...

weixin_44353999

17414人浏览 · 2021-08-03 17:58:40

weixin_44353999 · 2021-08-03 17:58:40 发布

文章目录

前言
1.style样式
2.body部分
3.效果图

前言

用html和css实现简单的搜索框

1.style样式

代码如下（示例）：

<style>
        * {
            box-sizing: border-box;  /*宽度和高度会包括内边距和边框*/
        }

        div.search {
            padding: 10px 0;
        }

        form {
            position: relative;
            width: 300px;
            margin: 0 auto;  /*设置宽度后，居中*/
        }

        input,button {
            border: none;   /*无边框样式；元素的总宽度和高度包括边框的宽度 */
            outline: none;  /*无轮廓样式；轮廓是在元素周围绘制的一条线，在边框之外并且可能与其他内容重叠，以凸显元素，元素的总宽度和高度不受轮廓线宽度的影响。*/
        }

        .search input {
            width: 100%;
            height: 42px;
            padding-left: 13px;
            border: 2px solid #c5464a;
            border-radius: 19px;   /*border-radius 属性用于向元素添加圆角边框：*/
            background: transparent;  /*背景透明*/
        }

        .search button {
            height: 42px;
            width: 42px;
            cursor: pointer;  /*cursor属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状*/
            position: absolute;
            background: #c5464a;
            border-radius: 0 19px 19px 0;
            width: 60px;
            right: 0;
        }
        .search button:hover {
            background-color: #c7585c;  /*点击搜索按钮时的背景颜色*/
        }

        /* 在<button>元素后面插入内容，并设置所插入内容的样式： */
        .search button:before {
            content: "搜索";  /*插入的内容*/
            font-size: 13px;  /*插入内容的字体大小*/
            color: #F9F0DA;  /*插入内容的字体颜色*/
        }
    </style>

2.body部分

代码如下（示例）：

<body>
    <div class="search">
        <form action="" method="post">
            <input placeholder="请输入..." name="keyword" type="text">
            <button type="submit"></button>
        </form>
    </div>

</body>