로그인 input 스타일 방법

설계

<input> CSS 상태

• :invalid 상태일 때 color 또는 border-bottom 스타일 적용

• :valid 상태일 때 color 스타일 적용

경고 안내 텍스트

• [role="alert"]을 선택자로 해서 스타일링 할 수 있다.

• normal 상태 → 경고 일 때 스타일링 적용 ➕ display: none

• invalid 상태 → display: block으로 경고 텍스트가 보이게 한다.

<label> 스타일링

• input:focus일 때, label 위치 설정 → padding, em 단위로 설정

코드 참고

/* Promotion → Email form 스타일링 ------------------------------------------------------ */
.emailContainer {
  &__block {
    position: relative;
    width: rem(228);

    @include media('>=lg') {
      width: rem(540);
    }

    label {
      letter-spacing: -0.04em;
      color: get-color(gray);
      transition: all 0.2s ease(out-expo);
      @include font-and-line-height(13px, 1.35);
      @include position(absolute, top 12px left 15px);

      @include media('>=lg') {
        top: 18px;
        font-size: rem(16);
      }
    }

    input {
      width: 100%;
      border: 0;
      border-radius: rem(50);
      background: get-color(white);
      @include fsp(13, 18 20 7);

      @include media('>=lg') {
        border-radius: 0;
        font-size: rem(16);
        @include fsp(16, 23 20 16);
      }
    }

    input:focus + label {
      top: 3px;
      left: 20px;
      font-size: rem(11);

      @include media('>=lg') {
        top: 5px;
        left: 19px;
        font-size: rem(12);
      }
    }

    input:valid {
      color: get-color(black);
    }

    input:invalid {
      border-bottom: 3px solid get-color(red);
      color: get-color(red);
    }

    [role='alert'] {
      display: none;
      margin-top: rem(5px);
      line-height: 1.35;
      letter-spacing: -0.04em;
      font-size: rem(14px);
      font-weight: bold;
      color: get-color(red);
    }
  }

  // emailContainer____block--valid (--nvalid)
  &__block--invalid [role='alert'] {
    display: block;
    @include text(align center);

    @include media('>=lg') {
      text-align: left;
      @include p(l rem(20));
    }
  }

  &__block--valid label,
  &__block--invalid label {
    top: 3px;
    left: 20px;
    font-size: rem(11px);

    @include media('>=lg') {
      top: 5px;
      left: 19px;
      font-size: rem(12px);
    }
  }
}