修复 :hover + class答案

【问题标题】：Fix on :hover + class修复 :hover + class
【发布时间】：2018-03-11 23:55:51
【问题描述】：

我正在尝试为他的伪类 :hover 上的输入添加一个边框，同时在它旁边的按钮上添加相同的边框。我听说使用 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>

【问题讨论】：

标签： html css class hover pseudo-class

【解决方案1】：

请试试这个。我已经添加了这个 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>

【讨论】：

【解决方案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>

【讨论】：