feat: add input:focus and hide-btn

input focus 테두리 추가(outline), 비밀번호 보이기/숨기기 버튼 추가
codeit-bootcamp-frontend · May 9, 2024 · 6d1e1dd · 6d1e1dd
1 parent 27f3421
commit 6d1e1dd
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 0 deletions.
diff --git a/login.html b/login.html
@@ -31,6 +31,8 @@ <h1>
                 <label class="form__label">
                     <p class="label__name">비밀번호</p>
                     <input class="label__input" type="password" placeholder="비밀번호를 입력해주세요" required>
+                    <img class="hide-btn" src="../img/icon/btn__visibility-off.svg" alt="비밀번호숨기거나보이기" width="24"
+                        height="24" />
                 </label>
             </div>
             <button class="submit-btn" type="submit">로그인</button>

diff --git a/styles/login.css b/styles/login.css
@@ -30,6 +30,7 @@
 }
 
 .form__label {
+    position: relative;
     display: flex;
     flex-direction: column;
     font-size: 18px;
@@ -53,6 +54,16 @@
     background-color: var(--gray100);
 }
 
+.label__input:focus-visible {
+    outline: 3px solid #3692ff;
+}
+
+.hide-btn {
+    position: absolute;
+    right:24px;
+    bottom: 16px;
+}
+
 .submit-btn {
     font-size: 20px;
     font-weight: 600;