0

私は自分のサイトでブートストラップから使用していますが、このようなものを作成したくありません。

私のhtmlコード:

<form class="navbar-form navbar-left" role="search">
  <div class="form-group">
    <input type="text" class="form-control search-input" placeholder="Search">
  </div>
  <button type="submit" class="btn btn-default"> 'Find'</button>
</form>

入力のサイズを変更するにはどうすればよいですか?

4

4 に答える 4

2

これを試して

.navbar .search-input[type=text]:focus {
    width: 400px;
    border-color: #51a7e8;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.1),0 0 5px rgba(81,167,232,0.5);
    outline: none;
}
于 2013-08-28T14:58:18.857 に答える
1

投稿したチュートリアルには、必要なコードが含まれています。入力をターゲットにして、遷移オプションを追加する必要があります。

.search-input { 
    -moz-transition: all .2s linear;
    -webkit-transition: all .2s linear;
    transition: all .2s linear;
    width: 200px;
}

次に、フォーカス時に新しい幅を設定します:

.search-input:focus { 
    width: 400px;
}

ここにフィドルがあります：http://jsfiddle.net/U5UZd/

于 2013-08-28T14:59:56.427 に答える
1

あなたが指定したチュートリアルでは、cssコードがあります：この部分をHTMLページに追加してください：DEMO HERE

<style stype='text/css'>

input[type=text].search_form
{
border: 1px solid #ccc;
border-radius: 3px;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
width:200px;
min-height: 28px;
padding: 4px 20px 4px 8px;
font-size: 12px;
-moz-transition: all .2s linear;
-webkit-transition: all .2s linear;
transition: all .2s linear;
}

input[type=text]:focus.search_form
{
width: 400px;
border-color: #51a7e8;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.1),0 0 5px rgba(81,167,232,0.5);
outline: none;
 }

</style>

<form class="navbar-form navbar-left" role="search">
  <div class="form-group">
    <input type="text" class="form-control search-input" placeholder="Search">
  </div>
  <button type="submit" class="btn btn-default"> 'Find'</button>
</form>
于 2013-08-28T15:04:20.903 に答える