学习笔记-变形搜索框

最新推荐文章于 2023-11-03 17:38:16 发布

Kurohimx

最新推荐文章于 2023-11-03 17:38:16 发布

阅读量128

点赞数

分类专栏：学习笔记文章标签： html css

本文链接：https://blog.csdn.net/m0_60269953/article/details/119876093

版权

学习笔记专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一个简单的圆形搜索框，聚焦后变为圆角搜索框。代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        input {
            margin: 100px;
            border-radius: 25px;
            height: 50px;
            width: 50px;
            background: url(search.png);
            background-repeat: no-repeat;
            background-position: 12px 12px;
            padding-left: 50px;
            outline: none;
            font-size: 15px;
            cursor: pointer;
            border: 2px solid black;
        }
        input::placeholder {
            color: transparent;
        }
        input:focus {
            height: 50px;
            width: 200px;
            padding-left: 40px;
            transition: 0.5s ease-in-out;
            cursor: text;
            background-color: #ddd;
        }
        input:focus::placeholder {
            color: gray;
        }
    </style>
</head>
<body>
    <form>
        <input type="text" name="search" placeholder="Search..">
    </form>
</body>
</html>

效果如下
聚焦前：

聚焦后：

搜索图片：

搜索图片

Kurohimx

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习笔记-变形搜索框

一个简单的圆形搜索框，聚焦后变为圆角搜索框。代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1
复制链接

扫一扫