Css 如何在Bootstrap 3中创建圆形搜索栏？

我在使用Bootstrap3创建圆形搜索栏时遇到了一个问题。 我尝试过使用class=“search query”和 下面是一个例子：

HTML:

不幸的是，没有任何帮助

我需要做一个搜索栏作为附加的图像。 我相信它可以通过引导3而不是 使用手动html5/css，但我不知道如何使用

我正在使用CDN：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

你能帮帮我吗？：）

在CSS中，设置：

表单查询{
边界半径：33像素；
}

使用以下代码：

      <input type="text" class="form-control" placeholder="Search" />

---

请参阅。

未能完全复制您想要的内容，但我认为已经足够接近了

为了灵感而提到的

p/S：如果您想微调样式，我想您可以尝试调整

.input group addon

或

#inputgroupssuccess1

的填充

---

我知道这个问题有点老了，但也许有人会觉得这个问题很有用

以下引导代码将起作用：

HTML 见来源[

注意：这需要字体

正如您所看到的，仍然需要一点自定义CSS，但它真正需要的是添加一个边界半径以实现舍入

---

包含字体很棒的搜索图标的.search btn看起来就像是实际输入元素的一部分，将其变为白色，并给它一个边框半径

Hi Argiris，问题是我在解决方案中没有使用button类。如何解决它？我需要它像我附加的一样是圆形的。很抱歉打扰您，但我“我是bootstrap的新手，我的工作急需它。边界半径将使其成为圆形，您只需确保在正确的元素上使用它-您需要在上使用它-因此根据您发布的代码。”搜索查询如果你想让搜索栏100%自举是不可能的。你需要创建一些自定义css。嗨，德鲁，你能帮我怎么做吗？你可以参考“收件人”未舍入且没有搜索图标

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

      <input type="text" class="form-control" placeholder="Search" />

   <div class="input-group">
    <input type="text" class="form-control search-form" 
     placeholder="Search">
     <span class="input-group-btn">
       <button type="submit" 
       class="btn search-btn" data-target="#search-form" 
       name="q">
         <i class="fa fa-search"><!--FONT AWESOME font @ 
         "http://fortawesome.github.io/Font-Awesome/" --></i>
       </button>
     </span>
   </div>

.search-form {
  border-radius: 30px 0px 0px 30px;
  /*border-radius: Top-left, Top-right, Bottom-right, Bottom-left;*/
}

.search-btn {
  border-radius: 0px 30px 30px 0px;
  cursor:pointer;
  background-color: white;
 }