HTML/CSS 将图标放入密码输入字段中

Question

尝试将此fa fa-eye-slash图标一直放在密码输入字段的右侧。

这是相关的 HTML 和 CSS。

.join-login-main-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-grow: 1;
}

.join-login-text {
  font-size: 3.5em;
  font-weight: bold;
  margin: 0;
}

.accent-text {
  color: #BC3A80;
}

.join-login-form {
  background-color: #202027;
  width: 50vw;
  max-width: 50%;
  padding: 2rem 4rem;
  border-radius: 20px;
}

.input-group {
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
}

.input-group:last-child {
  margin-bottom: 0;
}

.input-group label {
  font-weight: bold;
  margin-bottom: .5rem;
}

.input-group input {
  outline: none;
  background: none;
  border: 1px solid #374669;
  font-size: 1em;
  padding: .5em;
  color: inherit;
  border-radius: 5px;
}

<section class="join-login-main-section">
  <h1 className="join-login-text">
    Join and
    <span class="accent-text"> generate!</span>
  </h1>
  <form class="join-login-form">
    <div class="input-group" name="username">
      <label>Username:</label>
      <input type="text"/>
      <p class ="registerMsg">
        * Between 3 and 15 chars
      </p>
    </div>
    <div class="input-group" name="password">
      <label>Password:</label>
      <input type="password"/>
      <i class="fa fa-eye-slash"></i>
      <p class ="registerMsg">
        * Between 4 and 30 chars
      </p>
    </div>
    <div className="input-group">
      <button type="submit" class="btn">Join Now</button>
    </div>
  </form>
</section>

Answer 1

• 首先你需要将其包装input在icon同一个容器中

• 第二种样式是容器而不是输入本身.. border , flex... 容器并从输入中删除轮廓 , 背景 , border...

通过flex, flex-direction: row,align-items以及对 html 结构的简单更改，它可以是这样的

.join-login-form {
  background-color: #202027;
  width: 50vw;
  max-width: 50%;
  padding: 2rem 4rem;
  border-radius: 20px;
}

.input-group {
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
}
.input-group label{
  color : #fff;
  font-family : tahoma;
}
.input-group span{
  color : #888;
  font-family : tahoma;
  font-size: 11px;
}
.input-icon-container{
  display: flex;
  flex-direction: row;
  border: 1px solid #374669;
  border-radius: 5px;
  background : #fff;
  align-items : center;
  overflow: hidden;
}
.input-icon-container.error{
  border: 1px solid red;
  background : #fdd3d3;
}
.input-icon-container input {
  outline: none;
  border: none;
  background: none;
  font-size: 1em;
  padding: .5em;
  color: inherit;
  flex : auto 1 1;
  width : 100%;
  background : none;
  background-color : transperant;
}

.input-icon-container .fa{
  padding : 10px;
}

.fa.fa-user{
  background : #374669;
  color: #fff;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<form class="join-login-form">
  <div class="input-group" name="username">
    <label>UserName</label>
    <div class="input-icon-container">
      <input type="email"/>
      <i class="fa fa-check"></i>
    </div>
    <span>* Between 3 and 15 chars</span>
  </div>
  <div class="input-group" name="UserName">
    <label>UserName Left Icon</label>
    <div class="input-icon-container">
      <i class="fa fa-user"></i>
      <input type="email"/>
      <i class="fa fa-check"></i>
    </div>
    <span>* Between 3 and 15 chars</span>
  </div>
  <div class="input-group" name="UserName">
    <label>UserName Error</label>
    <div class="input-icon-container error">
      <input type="email"/>
      <i class="fa fa-times"></i>
    </div>
    <span>* Between 3 and 15 chars</span>
  </div>
  <div class="input-group" name="password">
    <label>Password</label>
    <div class="input-icon-container">
      <input type="password"/>
      <i class="fa fa-eye-slash"></i>
    </div>
    <span>* Between 4 and 30 chars</span>
  </div>
</form>