css怎么做类似百度的搜索框

如果你想学习如何实现类似百度搜索框的样式，首先你需要了解CSS如何布局、排版及样式设置的基本知识。下面我们将为你介绍一种较为简单的实现方式，步骤如下。

 html>
     head>
     style>
 .search-wrapper{
       width: 600px;
       margin: 0 auto;
       position: relative;
 }
 .search-input{
        width: 100%;
        height: 36px;
        line-height: 36px;
        padding: 0 50px 0 20px;
        border: none;
        border-bottom: 2px solid #666;
        font-size: 16px;
 }
 .search-input:focus{
        outline: none;
        border-color: #3385ff;
 }
 .search-button{
        width: 40px;
        height: 40px;
        position: absolute;
        right: 0;
        top: 0;
        background-color: #3385ff;
        border: none;
        outline: none;
        cursor: pointer;
        text-indent: -9999px;
 }
 .search-button:before{
        content: "";
        display: inline-block;
        width: 20px;
        height: 20px;
        margin-top: 10px;
        background-image: url(search-icon.png);
        background-repeat: no-repeat;
        background-size: contain;
 }
     /style>
     /head>
     body>
       div class="search-wrapper">
         input type="text" class="search-input" placeholder="请输入关键词">
         button type="submit" class="search-button">
    搜索   /div>
     /body>
     /html>
    

以上代码中，我们通过设置外层div为相对定位，内部input为绝对定位，并设置一个固定的右内边距（padding-right）和右定位（right），这样，在内部input设置的宽度减去右内边距的时候，就能保证按钮从右侧完全覆盖input框，而按钮的样式设置了宽高和绝对定位。同时，我们也为input设置了一个底部的边框，通过:focus和hover等伪类设置样式，可以让它在交互状态下呈现不同的样式，更加美观。

总体来说，该实现方式较为简单，同时也能达到类似百度搜索框的样式要求。你可以根据自己的需求，自由地设置输入框样式，达到更好的用户使用体验，同时，也可以通过CSS实现一些动画和交互效果，让你的搜索框更加生动。希望这篇文章能帮助到你更好地了解CSS的使用技巧。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！