HTML：

<div style="padding:20px;">
    <form class="form-search form-inline">
        <input type="text" class="search-query" placeholder="Search..." />
    </form>
</div>

CSS：

input.search-query {
    padding-left:26px;
}

form.form-search {
    position: relative;
}

form.form-search:before {
    content:'';
    display: block;
    width: 14px;
    height: 14px;
    background-image: url(http://getbootstrap.com/2.3.2/assets/img/glyphicons-halflings.png);
    background-position: -48px 0;
    position: absolute;
    top:8px;
    left:8px;
    opacity: .5;
    z-index: 1000;
}

http://jsfiddle.net/qdGZy/

不幸的是，没有任何帮助。

我需要将搜索栏设为附加图像。我确定可以通过Bootstrap 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">

你能帮帮我吗？ :)

Answer 1

在CSS中，设置：

form-query {
    border-radius: 33px;
}

Answer 2

没有设法完全复制你想要的东西，但我认为足够接近。

提到Bootstrap Form Control Validation State获取灵感。

P / S：如果您想微调样式，我认为您可以尝试调整.input-group-addon或#inputGroupSuccess1的填充。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group has-feedback">
  <div class="input-group">
    <span class="input-group-addon" style="background-color:#FFFFFF;"><span class="glyphicon glyphicon-search"></span></span>
    <input type="text" class="form-control" id="inputGroupSuccess1" placeholder="Search..." style="border-left: 0px;">
  </div>
</div>

希望这有帮助。

Answer 3

我知道这个问题有点陈旧，但也许有人会发现这个问题很有用。

以下引导代码将起作用：

HTML

   <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>

CSS

.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;
 }

请参阅来源[http://jsfiddle.net/blayderunner123/C5Eq7/][1]

注意：这需要Font很棒。

如您所见，仍然需要一个小的自定义CSS，但实际上只是添加一个border-radius来实现舍入

包含字体真棒搜索图标的.search-btn看起来就像它是实际输入元素的一部分，方法是将其设置为白色，并为其提供边框半径

Answer 4

使用以下代码：

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

参考demo。

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

HTML：

CSS：

4 个答案:

HTML

CSS