时间戳

首页 > 解决方案 > 占位符和光标定位 CSS

html - 占位符和光标定位 CSS

问题描述

我在我的 HTML 输入文本区域中使用了很棒的字体图标。一旦应用了占位符和光标下方的 CSS，它们都在不同的地方，希望在同一点上进行。我正在使用 CSS 和 HTML。我不明白我哪里错了。

.inputIcons{
  position:relative
}

.inputIcons i{
  position:absolute;
  left: 0px;
  top: 8px;
  padding: 9px 8px;
  transition:.3s;
}

input::placeholder{
  padding-left: 35px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css" rel="stylesheet" type="text/css">
<div class="col-6 col-12-xsmall ">
   <div class="inputIcons">
    <input class="form-control" type="email" name="email" value placeholder="Email " v-model="email" autocomplete="off" required 
      />
     <i class="fas fa-envelope" aria-hidden="true"></i>
   </div>
</div>

标签： htmlcssfont-awesome

解决方案

试试这个使用 top -7px 到 .inputIcons 我

 .inputIcons{position:relative;}
   .inputIcons i{position:absolute;
    left: 0px;
    top: -7px;
    padding: 9px 8px;
    transition:.3s;
    }
    input::placeholder{
       padding-left: 35px;
    } 
 <div class="col-6 col-12-xsmall ">
   <div class="inputIcons">
    <input class="form-control" type="email" name="email" value placeholder="Email " v-model="email" autocomplete="off" required 
      />
       <i class="fas fa-envelope" aria-hidden="true"></i>
     </div>
      </div> `
<script src="https://kit.fontawesome.com/a076d05399.js"></script>

推荐阅读