3

Twitterブートストラップを使用していますが、検索ボックスにドロップダウンを作成したいと思います。Gmailの検索バーをエミュレートしようとしています。ここでは、入力検索ボックスの最後にカレットがあり、クリックしてフォームを開くことができます。

カレットがクリックされたときに、ブートストラップのドロップダウンを使用してdivを表示しようとしています。ただし、グーグルのように入力ボックス内にカレットを配置することはできません。

グーグルのコードを見ると、ドロップダウンカレットの横に境界線のない入力ボックスがあり、境界線のあるdivに埋め込まれていることがわかります。

ブートストラップ入力ボックスのborderプロパティをオーバーライドできません。誰かがそれを試しましたか？

以下は私のコードです-

<div class="input-append dropdown">

  <input type="text" name="puesto" class="input-xlarge noBorder"   placeholder="Email Address"/>    <a class="dropdown-toggle btn" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
    <b class="caret"></b>   </a>

  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">    Hello world   </ul>   <button class="btn" type="button"><i class="icon-filter"></i></button> </div> 

<style type="text/css">   .noBorder {border-top-width: 0px;} </style>
4

1 に答える 1

0

次のように、クラスを使用してオーバーライドを支援します。

<input class="the-input" type="text" />

そして、その境界線を取り除きます:

input.the-input {
    border: none transparent;
    -webkit-box-shadow: none;
            box-shadow: none;
    filter:-;    /* for IE */
}
于 2012-09-20T15:52:05.967 に答える