最新HTML设计搜索表单

最新推荐文章于 2024-09-10 14:15:01 发布

阿立聊代码

最新推荐文章于 2024-09-10 14:15:01 发布

阅读量521

点赞数 2

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

本文链接：https://blog.csdn.net/qq_36324341/article/details/141094682

版权

MySQL 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

设计搜索表单

页眉中包含表单，表单中只需包含label和Input.

实现如下效果：文本框动态变宽效果

代码：6.2.4.设计搜索表单.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        header {
            font-family: Arial, Helvetica, sans-serif;
            background-color: #ddd;
            display: block;
            overflow: hidden;
            width: 500px;
            margin: 30px;
            border-radius: 6px;
        }

        .stylin_form_search1 {
            float: right;
            width: 200px;
            margin: 5px;
            padding: 5px;
        }

        .stylin_form_search1 input {
            float: right;
            width: 70px;
            padding: 2px 0 3px 5px;
            /* 去掉默认的突显轮廓线 */
            outline: none;
            font-size: 0.8em;
            border-color: #eee #ccc #ccc #eee;
            /* 针对其他浏览器厂商前缀*/
            border-radius: 10px;
            -webkit-transition: 2s width;
            /* 获取焦点时，宽度为200px */
        }

        .stylin_form_search1 input:focus {
            width: 200px;
        }

        /* 不显示标注 */
        .stylin_form_search1 label {
            display: none;
        }
    </style>
</head>

<body>
    <header>
        <form class="stylin_form_search1" action="#" method="post">
            <label for="search">search</label>
            <input type="search" id="search" name="search" placeholder="search" />
        </form>
    </header>
</body>

</html>