用HTML和CSS实现搜索框

最新推荐文章于 2024-06-07 19:03:53 发布

weixin_44353999

最新推荐文章于 2024-06-07 19:03:53 发布

阅读量1.6w

点赞数 40

分类专栏：前端文章标签： css html

本文链接：https://blog.csdn.net/weixin_44353999/article/details/119355499

版权

前端专栏收录该内容

6 篇文章 2 订阅

订阅专栏

文章目录

前言
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>

3.效果图

weixin_44353999

关注

40
点赞
踩
322

收藏

觉得还不错? 一键收藏
0
评论
用HTML和CSS实现搜索框

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

扫一扫