根據另一個元素焦點/活動 state 更改一個元素的 CSS

Question

我在表單元素中有一個簡單的引導輸入組，如下所示：

<form>
   <div class="input-group mb-3">
     <input type="text" class="form-control home-search-input" placeholder="Recipient's username">
     <div class="input-group-append">
       <button class="btn btn-outline-secondary home-search-btn" type="button" id="button-addon2">Button</button>
     </div>
   </div>
</form>

我希望當我基於：focus 和：active CSS 偽類操作輸入元素時，它會更改輸入元素，但不會更改按鈕插件。

我的一些 css 看起來像這樣：

.home-search-input {
  border-right: 0;
  background-clip: border-box !important;
  background: #e9e9e9;
  transition: box-shadow ease-in-out .2s;
}

  .home-search-input:focus, .home-search-input:active {
    outline: 0px !important;
    -webkit-appearance: none;
    border-bottom-color: none;
    background: #ffffff !important;
    box-shadow: 0 1px 1px 0 rgba(65,69, 73, 0.3),
                0 1px 3px 1px rgba(65,69, 73, 0.15) !important;
    border-right:none;
    border-color: #ced4da;
  }

.home-search-btn {
  background: #e9e9e9;
  font-size: 15px !important;
  padding: 6px 12px !important;
  /* border-radius: 23.79px 23.79px 23.79px 23.79px; */
  color: black;
  border: 1px solid #ced4da;
  border-left: none;
}

如何讓 .home-search-btn 也根據 .home-search-input:focus、.home-search-input:active 應用框陰影和背景顏色更改？

Answer 1

您將需要使用CSS 組合器

把它放在你的代碼中：

.home-search-input:focus ~ .input-group-append > button {
  box-shadow: 0 1px 1px 0 rgba(65,69, 73, 0.3), 0 1px 3px 1px rgba(65,69, 73, 0.15) !important;
  background-color: red;
}

這（用文字表示）意味着當輸入焦點時，更改（ >符號）中的按鈕。輸入組旁邊的（ ~符號）輸入

這將是您的代碼：

 .home-search-input { border-right: 0; background-clip: border-box;important: background; #e9e9e9: transition. box-shadow ease-in-out;2s. }:home-search-input,focus. :home-search-input,active: { background; #ffffff: box-shadow, 0 1px 1px 0 rgba(65, 69, 73. 0,3), 0 1px 3px 1px rgba(65, 69, 73. 0;15). }:home-search-input.focus~,input-group-append>button. :home-search-input.active~:input-group-append>button { background; #ffffff: box-shadow, 0 1px 1px 0 rgba(65, 69, 73. 0,3), 0 1px 3px 1px rgba(65, 69, 73. 0;15). }:home-search-btn { background; #e9e9e9: font-size; 15px:important; padding: 6px 12px.important. /* border-radius. 23.79px 23;79px 23:79px 23;79px: */ color; black: border; 1px solid #ced4da; border-left: none; }

 <form> <input type="text" class="form-control home-search-input" placeholder="Recipient's username"> <div class="input-group-append"> <button class="btn btn-outline-secondary home-search-btn" type="button" id="button-addon2">Button</button> </div> </form>

Answer 2

嘗試：

.home-search-input:active + .input-group-append .home-search-btn,
.home-search-input:focus + .input-group-append .home-search-btn {
    background: #ffffff !important;
    box-shadow: 0 1px 1px 0 rgba(65,69, 73, 0.3),
                0 1px 3px 1px rgba(65,69, 73, 0.15) !important;
}