入力CSSが問題提出ボタンをクリックすると拡大

Question

私は入力フィールドをクリックすると..それはすばらしいです。しかし、私が送信ボタンをクリックすると。それは縮小する..私はどのようにそれを拡大しておくのですか？

HTML：

<div class="search-container"> 
    <input class="from-control" id="searchTerm" name="textarea" 
    type="search" placeholder="Search"> 
    <button class="btn btn-success btn-xs" type="button" name="button" 
    id="search">Search</button> 
</div> 

CSS：

.search-container { 
margin-top: 25px; 
} 

.from-control { 
border-radius: 5px; 
border: 1px solid #ccc; 
padding: 4px; 
width: 124px; 
height: 35px; 
-webkit-transition: all .5s ease; 
-moz-transition: all .5s ease; 
transition: all .5s ease; 
} 

input.from-control:focus { 
width: 40vmax; 
border: 1px solid #ccc; 
} 

Answer 1

あなたはフォーカスが（送信ボタンをこのケースでは）何か他のものに変更されたとき、それは論理的に縮小し、入力を拡大する:focusを使用しているため。フォームにアクションがないので、送信ボタンをクリックしたときに非同期呼び出しを行うと思います。

可能な解決策は、その後、あなたのonClick()機能であなたがaddCLass("expanded")を使用して、入力フィールドにクラスを追加することができます

input.form-control.expanded { 
    width: 40vmax; 
    border: 1px solid #ccc; 
} 

に

新しいクラスを作成することです。