加入Twitter引导搜索框和搜索按钮,并在搜索按钮的右侧弯曲

时间:2013-01-23 14:28:03

标签: html css search button twitter-bootstrap

这是我的引导代码

 <div class="input-append" align="center" > 
           <input type="text" name="q" class="span2 search-query" placeholder="Snipp or Tag"/> 

           <button type="submit" class="btn">Search</button> 

        </div>

这是jsfiddle

有没有办法加入搜索框和搜索按钮,还可以弯曲Search按钮的右侧

2 个答案:

答案 0 :(得分:3)

控制搜索按钮的border-radius的css类是.form-search .input-append .btn。要应用该类,请在该input-append div周围添加一个表单或div。

像这样:

<div class="form-search">
 <div class="input-append"> 
  <input type="text" name="q" class="span2 search-query" placeholder="Snipp or Tag"/><button type="submit" class="btn">Search</button> 
 </div>
</div>

以下是documentation的链接,此处是jsFiddle的更新。

答案 1 :(得分:0)

只需添加此内容。

input.search-query {
    -moz-border-top-right-radius: 0;
    -webkit-border-top-right-radius: 0;
    border-top-right-radius: 0;

    -moz-border-bottom-right-radius: 0;
    -webkit-border-bottom-right-radius: 0;
    border-bottom-right-radius: 0;
}