搜索表单

最新推荐文章于 2023-02-11 14:53:24 发布

weixin_33811961

最新推荐文章于 2023-02-11 14:53:24 发布

阅读量131

点赞数

文章标签： python

原文链接：https://my.oschina.net/Cheney521/blog/530677

版权

2019独角兽企业重金招聘Python工程师标准>>>

没加css的效果：

添加css的效果：

代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>搜索表单</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        header{
            font-family: helvetica,arial,sans-serif;
            display: block;
            overflow: hidden;
            width: 500px;
            margin: 30px;
            border-radius: 6px;
            background-color: #dddddd;
        }
        /*包含 label 和 input 的容器*/
        form.stylin_form_search1{
            float: right;
            width: 200px;
            margin: 5px;
            padding: 5px;
        }
        form.stylin_form_search1 input{
            float: right;
            width: 70px;
            padding: 2px 0 3px 5px;
            outline: none; /*去掉默认的突显轮廓线*/
            font-size:.8em; border-color:#eee #ccc #ccc #eee;
            /*针对其他浏览器的厂商前缀*/
            border-radius:10px;
            -webkit-transition:1s width;
        }
        form.stylin_form_search1 input:focus {
            width:200px;
        }
        form.stylin_form_search1 label {
            display:none;/*标注是必要的，但不用显示出来*/
        }

    </style>
</head>
<body>
    <header>
        <form id="" 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>

转载于:https://my.oschina.net/Cheney521/blog/530677