Question

我的LESS出了点问题。当特殊输入处于焦点时，我想制作具有特定颜色id的div元素的“border-bottom”。

#loginPassword:focus #passwordIconDiv {
  border-bottom: 1px solid rgba(222,145,81, 1);
}

<div class="form-group margin-b-0">
  <div class="input-group mb-2 margin-b-0">
    <div class="input-group-prepend margin-b-0">
      <div class="input-group-text margin-b-0" id="passwordIconDiv">
        <i class="fal fa-key"></i>
      </div>
    </div>
    <input type="password" class="form-control" id="loginPassword" placeholder="PASSWORD">
  </div>
</div>

为什么这不起作用？

Answer 1

使用您的标记，您无法单独使用CSS。你可以通过javascript实现你想要的。这是一个使用jQuery的解决方案，可以在焦点和模糊事件上切换.focused类。

＆＃13;

$('#loginPassword').on('focus blur', function() {
   $(this).parent().toggleClass('focused');
});

＆＃13;

.focused #passwordIconDiv {
  border-bottom: 1px solid rgba(222,145,81, 1);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="form-group margin-b-0">
  <div class="input-group mb-2 margin-b-0">
    <div class="input-group-prepend margin-b-0">
      <div class="input-group-text margin-b-0" id="passwordIconDiv">
        <i class="fa fa-key"></i>
      </div>
    </div>
    <input type="password" class="form-control" id="loginPassword" placeholder="PASSWORD">
  </div>
</div>

＆＃13;

LESS不会将样式应用于#ID

1 个答案: