html+css 仿百度搜索框

最新推荐文章于 2022-09-23 10:13:06 发布

Wantfly9951

最新推荐文章于 2022-09-23 10:13:06 发布

阅读量1.1k

点赞数 1

分类专栏： web网页设计文章标签： html css js

本文链接：https://blog.csdn.net/Wantfly9951/article/details/115483561

版权

web网页设计专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .searchcon {
        width: 500px;
        height: 50px;
        margin: 100px auto;
    }

    .parent {
        width: 100%;
        height: 42px;
        top: 4px;
        position: relative;
    }

    .parent>input:first-of-type {
        /*输入框高度设置为40px, border占据2px，总高度为42px*/
        width: 380px;
        height: 40px;
        border: 1px solid #ccc;
        font-size: 16px;
        outline: none;
    }

    .parent>input:first-of-type:focus {
        border: 1px solid #317ef3;
        padding-left: 10px;
    }

    .parent>input:last-of-type {
        /*button按钮border并不占据外围大小，设置高度42px*/
        width: 100px;
        height: 44px;
        position: absolute;
        background: #317ef3;
        border: 1px solid #317ef3;
        color: #fff;
        font-size: 16px;
        outline: none;
    }
</style>
<body>
<div class="searchcon">
    <form action="" class="parent">
        <input type="text">
        <input type="button" value="搜索">
    </form>
</div>
</body>
</html>

Wantfly9951

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html+css 仿百度搜索框

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><style> .searchcon { width: 500px; height: 50px; margin: 100px auto; }
复制链接

扫一扫