input type text 추가요소 커스텀

<input type="password" class="form__input password" placeholder="비밀번호">

 

커스텀에 필요한 css

 

 input {
          width: 100%;
          height: 52px;
          padding: 14px 16px;
          border-radius: 8px;
          border: 1px solid var(--reed-gray100);
        }
        input:focus {
          outline: 1px solid var(--reed-gray300);
        }
        input::placeholder {
          color: var(--reed-gray300);
        }

input:focus > 인풋 박스를 클릭하고나면 나오는 아웃라인 효과 

input::placeholder > 클릭전 나오는 기본 문구 color 변경