如何定位這個i標簽-有解無憂

我正在嘗試將<i>輸入標簽內的兩個標簽作為成功和錯誤訊息的一部分移動，但我不知道如何<i>在我的 div 元素內定位標簽。我正在使用引導類：

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

uj5u.com熱心網友回復：

您需要的選擇器是

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

uj5u.com熱心網友回復：

你想實作這樣的目標嗎？

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/463264.html

標籤：javascript css 粗鲁的前端

上一篇：當我更新context.provider的值時，子組件不會改變顏色

下一篇：在保持順序的同時將字串大寫字母移到前面（JavaScript）