如何定位这个 i 标签

Question

我试图在输入标签内移动两个 <i> 标签作为成功和错误消息的一部分，但我无法弄清楚如何将 <i> 标签作为目标我的 div 个元素。我正在使用 bootstrap 类 :

.fa-check-circle {
  position: absolute;
  top: 10px;
  right: 10px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div class="mb-3 input-control">
  <label for="full-name">Full name\User name</label><br>
  <p>*You can only have on user name per e-mail account</p>
  <input type="text" class="form-control" id="full-name" name="full-name" placeholder="Full name">
  <i class="fas fa-check-circle"></i>
  <i class="fas fa-exclamation-circle"></i>
  <small class="error-name">error</small>
  <br>
</div>

Answer 1

你想实现这样的目标吗？

.inputDiv {
    display: flex;
    border: 1px solid black;
    width: 50%;
}

#full-name {
    width: 80%;
    border: none;
}

#full-name:focus{
    outline: none;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div class="mb-3 input-control">
  <label for="full-name">Full name\User name</label><br>
  <p>*You can only have on user name per e-mail account</p>
  <div class='inputDiv'>
    <input type="text" class="form-control" id="full-name" name="full-name" placeholder="Full name">
    <i class="fas fa-check-circle"></i>
    <i class="fas fa-exclamation-circle"></i>
    <small class="error-name">error</small>
  </div>
  <br>
</div>

Answer 2

您需要的选择器是

.input-control>input[type=text]~i.fas

.input-control>input[type=text]~i.fas {
  position: absolute;
  transform: translate(-1.5em, .2em);
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="mb-3 input-control">
  <label for="full-name">Full name\User name</label><br>
  <p>*You can only have on user name per e-mail account</p>
  <input type="text" class="form-control" id="full-name" name="full-name" placeholder="Full name">
  <i class="fas fa-check-circle"></i>
</div>
<div class="mb-3 input-control">
  <label for="full-name2">Full name\User name</label><br>
  <p>*You can only have on user name per e-mail account</p>
  <input type="text" class="form-control" id="full-name2" name="full-name" placeholder="Full name">
  <i class="fas fa-exclamation-circle"></i>
  <small class="error-name">error</small>
</div>

如何定位这个 i 标签

How to target this i tag

javascript

css

frontend

sass