Yael Yañez Yael Yañez - 3 years ago 165
CSS Question

Fix on :hover + class

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 Source

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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download