I am attempting to apply a border to an input element when its pseudo class :hover is activated, while also adding the same border to the button next to it. I have read that using the selector class:hover + class should achieve this effect. However, in my specific situation, the border is only applied to the button and not to the input. It is worth noting that I am utilizing the Materialize framework. Below is the snippet of my HTML code:
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>