代码之家 › 专栏 › 技术社区 › Janosz ÐÑÐ°ÑÐ¸ÑÐ½Ð¸Ðº

如何瞄准这个i标签

frontend sass css javascript

Janosz ÐÑÐ°ÑÐ¸ÑÐ½Ð¸Ðº · 技术社区 · 3 年前

我正试着移动两个 <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>

2 回复 | 直到 3 年前

connexo 3 年前

你需要的选择器是

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

Evren 3 年前

你想实现这样的目标吗?

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