搜索框上的转换不起作用

Question

我正在尝试在焦点时扩大搜索框的宽度。它工作正常，但过渡不起作用。请有人说清楚，这些代码有什么问题。无法理解。

//css file
// class name of div(.searchBox)
.searchBox {
  margin: 100px auto;
  width: 300px;
  height: 200px;
  background-color: #ccc;
  padding-left: 20px;
  padding-top: 20px;
  -webkit-transition: all 2s easy-in-out;
  -moz-transition: all 2s easy-in-out;
  transition: all 2s easy-in-out;
}

// class name of input box
.search {
  padding: 10px;
  font-size: 1em;
}

/*
input[type="search"]:focus {
  width: 250px;
  background-color: #ddd;
}
*/

.searchBox form .search:focus {
  width: 250px;
  background-color: #444;
}

在一些更改之后代码看起来像这些（遗憾的是转换不起作用）

Answer 1

试试这个，

＆＃13;

＆＃13;

.searchBox {
  margin: 100px auto;
  width: 300px;
  height: 200px;
  background-color: #ccc;
  padding-left: 20px;
  padding-top: 20px;
}
.search {
  padding: 10px;
  font-size: 1em;
  width: 130px;
  -webkit-transition: all 2s ease-in-out;
  -moz-transition: all 2s ease-in-out;
  transition: all 2s ease-in-out;
}
.searchBox .search:focus {
  width: 250px;
  background-color: #444;
}

＆＃13;

<div class="searchBox">
<input type="text" placeholder="search" class="search">
</div>

＆＃13;

＆＃13;

＆＃13;