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