修复：悬停+类

Question

我正在尝试为其伪类上的输入添加边框：悬停并同时将相同的边框添加到其旁边的按钮。我听说使用class：hover + class应该可以工作。但在我的情况下，边框只添加到按钮而不是输入。顺便说一句，我正在使用物化框架。 这是我的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

请试试这个。我添加了此css #search:focus{border: 10px solid red !important ;}

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

为两者使用不同的焦点风格

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,#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>