css怎么做圆形搜索框

要在CSS中做一个圆形搜索框，可以使用一些简单的技巧。首先，我们需要创建一个HTML结构来放置搜索框：

  div class="search-box">
        input type="text" placeholder="搜索..."/>
      /div>

我们使用一个元素来包含搜索框，然后在其中放置一个元素来接收输入值。接下来，我们需要通过CSS将其样式设置为圆形：

  .search-box {
        width: 50%;
     /* 可根据需要调整搜索框的宽度 */    margin: 0 auto;
     /* 水平居中 */    position: relative;
  }
    .search-box input[type="text"] {
        width: 100%;
        padding: 10px;
        border: none;
        border-radius: 50px;
     /* 让搜索框呈现圆形 */    background-color: #eee;
  }
    

通过给搜索框设置一个大的border-radius值，我们可以将其变成圆形。此外，我们还需要用position: relative来确保在其内部设置placeholder样式的伪元素(::placeholder)时不会被覆盖。最后，我们通过padding和background-color设置搜索框的样式。

有了这个CSS样式，我们就可以轻松地创建一个漂亮的圆形搜索框了。

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