Bootstrap Suchmenü bei einer Eingabe vergrössern

Wenn man in einem Bootstrap Suchfeld die Klasse so erweitert

<form class="navbar-form pull-right" method="post" action="/search/">
      <input class="form-control mac-style" name="search" value="" placeholder="Suchen" type="text">
</form>

Und die CSS erweitert

.mac-style {
    width: 200px;
    -webkit-transition: width 1s ease-in-out;
    -moz-transition:width 1s ease-in-out;
    -o-transition: width 1s ease-in-out;
    transition: width 1s ease-in-out;
}
.mac-style:focus{
    width: 460px;
}

dann verlängert sich das Suchfeld automatisch wenn man einen Begriff eingibt.