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

在您指定的教程中，有 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 回答
1

你可以像我在这个 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;
}

希望这可以帮助

于 2013-08-28T14:57:12.117 回答
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 回答