未應用 CSS 翻譯
P粉441076405
P粉441076405 2023-09-12 00:30:06
0
1
494

我需要將我的眼睛圖示與我的登入表單輸入置中。但是,我的 Top 50% 和翻譯屬性似乎應用於主字段類別而不是輸入內部。因此,圖示未在輸入欄位內對齊。

.form .field {
  position: relative;
  height: 70px;
  width: 100%;
  margin-top: 24px;
  border-radius: 3px;
}

.field input, .field button {
  height: 70%;
  width: 100%;
  border: none;
  font-size: 14px;
  font-weight: 400;
  border-radius: 3px;
}

.field input {
  outline: none;
  padding: 0 15px;
  border: 1px solid#CACACA;
}

.eye-icon {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  font-size: 18px;
  color: #8b8b8b;
  cursor: pointer;
  padding: 5px;
}
<div class="field input-field">
  <label for="login-pwd">Password</label>
  <input type="password" name="password" class="form-control" placeholder="Password" id="login-pwd" required="">
  <i class="bx bx-hide eye-icon" id="toggle-password"></i>
</div>

有人可以幫我解決這個問題嗎?我希望我的圖示位於輸入類型密碼的中心。

P粉441076405
P粉441076405

全部回覆(1)
P粉841870942

你需要給父元素position:relative;

#
.input-field {
 position: relative;
}
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!