寻求css / scss选择器改变：在行为之前：焦点

Question

我在这里有一些SCSS代码：

  .location {
    animation-delay: 80ms;
    position: relative;
    &:before {
      font-family: "FontAwesome";
      font-size: 24px;
      content: "\f041";
      position: absolute;
      left: 4px;
      top: 12px;
    }
    input {
      text-indent: 28px;
    }
  }

我想更改.location的文本颜色：before，ON .location input：focus。纯css甚至可以实现这一点吗？

感谢任何帮助：）

Answer 1

试试这个

＆＃13;

＆＃13;

$(document).ready(function() {
  $('.location input').on('focusin', function(event) {

    $('.location').addClass('text-red')

  }).on('focusout', function(event) {

    $('.location').removeClass('text-red')

  });
})

＆＃13;

.location {
  animation-delay: 80ms;
  position: relative;
}

.location:before {
  content: "Hi....";
  //font-family: "FontAwesome";
  //font-size: 24px;
  //content: "\f041";
  position: absolute;
  left: 4px;
  top: 20px;
}

input {
  text-indent: 28px;
}

.text-red:before {
  color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="location">
  <input type="text" name="">
</div>

＆＃13;

＆＃13;

＆＃13;