How to target this i tag-CodePudding

I am trying to move two <i> tags inside of an input tag as a part of a success and error message, but I can't figure out how to target the <i> tag inside of my div elements. I am using bootstrap classes :

.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 >
  <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"  id="full-name" name="full-name" placeholder="Full name">
  <i ></i>
  <i ></i>
  <small >error</small>
  <br>
</div>

CodePudding user response：

The selector you need is

.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 >
  <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"  id="full-name" name="full-name" placeholder="Full name">
  <i ></i>
</div>
<div >
  <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"  id="full-name2" name="full-name" placeholder="Full name">
  <i ></i>
  <small >error</small>
</div>

CodePudding user response：

Do you want to achieve something like this?

.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 >
  <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"  id="full-name" name="full-name" placeholder="Full name">
    <i ></i>
    <i ></i>
    <small >error</small>
  </div>
  <br>
</div>