html - 可调整大小的文本输入

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