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 包装在同一个容器中

• 第二个样式容器而不是输入本身..边框，flex...用于容器并从输入中删除轮廓，背景，边框...

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

Answer 2

.form-item{
  position: relative;
  width: 400px;
}

.custom-input {
  width: 100%;
  padding-bottom: 20px;
}

.custom-input .input-wrap {
  position: relative;
}

.auth-page .theme-m {
  min-width: auto;
}

.theme-m {
  font-weight: 400;
  color: #0e141e;
  line-height: 1.2;
  line-height: 1.2em;
}


.custom-input.theme-m .input {
  box-shadow: inset 0 1px 4px rgba(0,0,0,.1), 0 0 0 transparent;
  border: 0;
  border-radius: 0;
  background-color: #f3f7f7;
  color: #0e141e;
}

.custom-input .input-wrap.has-icon.align-icon-left .input {
  /*padding-left: 38px;*/
}

.custom-input .input-wrap.has-icon.align-icon-left .padding-left{
  padding-left: 38px
}

/* .custom-input .error{
  box-shadow: inset 0 1px 4px rgba(0,0,0,.1), inset 0 -2px 0 #d11534 !important;
} */

.custom-input.size-large .input {
  height: 56px;
  outline: none;
  font-size: 18px;
  width: 100%;
}


.custom-input .input-wrap.has-icon.align-icon-left .input-icon {
  right: auto;
  left: 7px;
}

.custom-input.theme-m .input-icon {
  color: #738f93;
}

.custom-input .input-icon, .custom-input .input-loading {
  position: absolute;
  top: calc(50% - 2px);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}


.form-item span{
  position: absolute;
  /*bottom: -4px;*/
  top: 20px;
  left: 7px;
  transition: visibility 0.5s, opacity 0.5s;
  animation-name: error-fade-in;
  animation-duration: 0.5s;
}

@keyframes error-fade-in {
  from {opacity: 0;}
  to {opacity: 1;}
}

<div class="form-item">
  <div class="custom-input theme-m size-large">
    <div class="input-wrap align-icon-left has-icon">
      <input type="text" placeholder="username" name="name" value="" class="input padding-left">
      <span  select="input-icon">
         ? 
      </span>
    </div>
  </div>
  <ng-content select="span" #inputError></ng-content>

</div>