Question

我在其下方有一个输入类型搜索和一个div。我想在搜索框聚焦时将div的颜色从蓝色更改为红色。

我的Div

  <div id="demo-2">
    <input type="search" placeholder="Search By Title, Author" />
    <div class="autocomplete">
      hello
    </div>
  </div>

我申请的课程

#demo-2 input[type="search"]:focus {
  width: 275px;
  padding-left: 32px;
  color: #000;
  background-color: #fff;
  cursor: auto;
}

.autocomplete {
  background-color: blue;
  height: 350px;
  width: 275px;
  position: absolute;
  display: block;
  right: 1em;
  top: 1em;
  z-index: -50;
  margin-right: 20px;
}

我的要求是，在不使用任何JavaScript的情况下，当搜索集中时，自动完成类的背景颜色应从蓝色变为红色。

尝试下面的代码，但没有用

#demo-2 input[type="search"]:focus {
  width: 275px;
  padding-left: 32px;
  color: #000;
  background-color: #fff;
  cursor: auto;

  .autocomplete {
    background-color: red;
  }
}

Answer 1

您可以使用adjacent sibling combinator (+)或general sibling combinator (~)

#demo-2 input[type="search"]:focus {
  width: 275px;
  padding-left: 32px;
  color: #000;
  background-color: #fff;
  cursor: auto;

  ~ .autocomplete {
    background-color: red;
  }
}

Answer 2

代替div使用label并以label块为例

input{
  &:focus{
    & ~ label{
      background-color:red;
    }
  }
}

label{
  display:block;
  background-color:blue;
  color:white;
  padding:.5rem;
  margin-top:1rem;
}

<input type="text" id="user" autocomplete="off">
<label for="user">Username</label>

当元素聚焦时，如何动态更改sass属性？

2 个答案: