修正:悬停+类

Question

我试图在他的伪类的输入中添加一个边框:悬停，同时，在它旁边的按钮上添加相同的边框。我听说使用类:悬停+类应该能工作。但在我的例子中，边框它只是添加到按钮中，而不是输入中。顺便说一下，我使用的是物化框架。这是我的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 ;}

​

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>

​

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>

​