title: Transition on search box not working
body: <p>I'm trying to expand the width of the search box when focus. It works fine but the transition is not working. Someone please put some light on it, what is wrong in these code. Couldn't figure it out.</p>
  
  <pre><code>//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;
  }
  </code></pre>
  
  <p>the code look like these after some changes (unfortunately transition is not working)
  <a href="https://i.stack.imgur.com/yZi8d.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yZi8d.png" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/UHSSB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UHSSB.png" alt="enter image description here"></a></p>