Fix on :hover + class

Question

I'm trying to add a border to an input on his pseudo class :hover and at the same time, ad the same border to the button next to it. I heard that using class:hover + class should work. But in my case, the border it's only added to the button and not to the input. I'm using materialize framework by the way. This is my html:

	margin-top: 5px;
	width: 100%;
	height: auto;
}
.container-4{
  width: 100%;
  vertical-align: middle;
  white-space: nowrap;
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration { display: none; }

.container-4 input#search{
  width: 78%;
  height: 50px;
  background: #E1E1E1;
  border: none;
  font-size: 10pt;
  float: left;
  color: #9FABAF;
  padding-left: 15px;
}
#search:focus+button.icon{
  border: 10px solid red!important;
  box-shadow: none!important;
}
.container-4 button.icon{
  border: none;
  background: #EDAE00;
  height: 50px;
  width: 20%;
  color: #FFFFFF;
  font-size: 10pt;
 
}
.container-4 input#search::-webkit-input-placeholder {
   color: #65737e;
}
 
.container-4 input#search:-moz-placeholder { /* Firefox 18- */
   color: #65737e;  
}
 .hey{
 	border:50px solid blue;
 }
.container-4 input#search::-moz-placeholder {  /* Firefox 19+ */
   color: #65737e;  
}
 
.container-4 input#search:-ms-input-placeholder {  
   color: #65737e;  
}

<div class="box">
  <div class="container-4">
    <input type="search" id="search" placeholder="Search..." />
    <button class="icon"><i class="material-icons">search</i></button>
  </div>
</div>

Answer 1

Please try this. I have added this css #search:focus{border: 10px solid red !important ;}

margin-top: 5px;
	width: 100%;
	height: auto;
}
.container-4{
  width: 100%;
  vertical-align: middle;
  white-space: nowrap;
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration { display: none; }

.container-4 input#search{
  width: 78%;
  height: 50px;
  background: #E1E1E1;
  border: none;
  font-size: 10pt;
  float: left;
  color: #9FABAF;
  padding-left: 15px;
}
#search:focus+button.icon{
  border: 10px solid red!important;
  box-shadow: none!important;
}
#search:focus{
  border: 10px solid red!important;  
}
.container-4 button.icon{
  border: none;
  background: #EDAE00;
  height: 50px;
  width: 20%;
  color: #FFFFFF;
  font-size: 10pt;
 
}
.container-4 input#search::-webkit-input-placeholder {
   color: #65737e;
}
 
.container-4 input#search:-moz-placeholder { /* Firefox 18- */
   color: #65737e;  
}
 .hey{
 	border:50px solid blue;
 }
.container-4 input#search::-moz-placeholder {  /* Firefox 19+ */
   color: #65737e;  
}
 
.container-4 input#search:-ms-input-placeholder {  
   color: #65737e;  
}

<div class="box">
  <div class="container-4">
    <input type="search" id="search" placeholder="Search..." />
    <button class="icon"><i class="material-icons">search</i></button>
  </div>
</div>