Bootstrap实现弹性搜索框

<form action="" method="get" class="form-horizontal"><div class="input-group search-input-group"><input type="hidden" name="scope" value="1"><input name="key" autocomplete="off" type="text" class="form-control" placeholder="输入要搜索的内容关键字" ><span class="input-group-addon"><button type="submit"><span class="glyphicon glyphicon-search"></span></button> </span></div></form>

.search-input-group .input-group-addon{background: white !important; }.search-input-group .form-control{border-right:0; box-shadow:0 0 0; border-color:#ccc;}.search-input-group{width: 40%;}.search-input-group button{border:0;background:transparent;}.search-input-group input:focus + button{z-index:3;}.search-input-group input{-webkit-transition: width 0.2s ease-in-out;-moz-transition:width 0.2s ease-in-out;-o-transition: width 0.2s ease-in-out;transition: width 0.2s ease-in-out;}.search-input-group input:focus{width: 500px;}