我在这里有一些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:的文本颜色,然后再打开.location输入:focus。纯CSS甚至有可能吗?

任何帮助表示赞赏:)

最佳答案

尝试这个



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

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

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

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

  });
})

.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;
}

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

10-05 21:00
查看更多