Css 搜索框上的转换不工作

我试图扩大搜索框的宽度时，焦点。它工作正常，但转换不起作用。有人请把一些光，在这些代码中有什么错误。我想不出来

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

经过一些更改后，代码看起来像这样。不幸的是，转换不起作用 试试这个

.搜索框{ 保证金：100像素自动； 宽度：300px； 高度：200px； 背景色：ccc； 左侧填充：20px； 填充顶部：20px； } .搜索{ 填充：10px； 字号：1em； 宽度：130px； -webkit转换：所有2个易于输入输出； -moz转换：所有2个易于输入输出； 过渡：所有2个易于输入输出； } .searchBox.search:焦点{ 宽度：250px； 背景色：444； }

---

似乎您错过了过渡中的宽度-webkit过渡：宽度2秒，易于输入输出；同时显示您的html您应该设置转换为.search，因为您将单独更改.search输入的宽度。您必须提到它的起始宽度。请检查代码段，它是否正常工作。检查拼写，输入输出不容易。。这很容易。。在我的眼睛上放轻松点。谢谢，很有效，是关于拼写的。如果你解决了你的问题，你可以接受这个答案。