Question

我在我的网站中使用bootstrap，我不想创建像this这样的东西。

我的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>

我如何调整输入值？

Answer 1

试试这个

.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;
}

Answer 2

你可以像我在this JSFiddle

那样做

.form-control.search-input[type=text]:focus {
width: 400px;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.1),0 0 5px rgba(81,167,232,0.5);
outline: none;
-moz-transition: all .2s linear;
-webkit-transition: all .2s linear;
transition: all .2s linear;
}

希望这有帮助

Answer 3

您发布的教程包含您需要的代码。您将要定位输入并添加转换选项：

.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/

Answer 4

在你指定的教程中，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>

可调整大小的文本输入

4 个答案: