css 搜索框

最新推荐文章于 2023-05-09 21:08:17 发布

lianflower

最新推荐文章于 2023-05-09 21:08:17 发布

阅读量522

点赞数 1

本文链接：https://blog.csdn.net/lianflower/article/details/108238397

版权

Css 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.3.1.min.js"></script>
    <style>
        #test {
            width: 270px;
            height: 40px;
            display: flex;
        }
        input {
            width: 75%;
            height:100%;
            border: orangered solid 2px;
            border-radius: 30px 0 0 30px;
            padding-left: 15px;
            outline: none;
        }
        button {
            width: 25%;
            height:100%;
            border-radius: 0 30px 30px 0;
            background: orangered;
            border: 1px solid orangered;
            color: white;
            font-size: 16px;
            padding-left: 1%;
            position: relative;
            outline: none;

        }
        button:active {
            top: 1px;
        }
    </style>
</head>
<body>
<div id="test">
    <input id="searchText" type="search" placeholder="服务单号">
    <button id="search">搜索</button>
</div>
<script>
    $("#searchText").click(function () {
        $(this).attr("placeholder", "");
    });
    $("#search").click(function () {
        alert("执行搜索");
    });
</script>
</body>
</html>

lianflower

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css 搜索框

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="../js/jquery-3.3.1.min.js"></script> <style> #test { width: 270px;
复制链接

扫一扫