유효성 검사 스타일 최종 수정

누락된 스타일을 추가하면서 기능을 최대화하려면 다음 핵심 원칙을 기억하세요. 가정하지 마세요.

즉, 상대 패딩, 여백, 테두리 및 색상에 CSS 변수를 사용할 수 있지만 확인란의 모양을 지정하지는 않습니다. 이는 요소별 스타일 결정이 아니라 프로젝트 수준 스타일 결정입니다. (머티리얼 디자인과 같은 일부 디자인 시스템은 모든 요소에 과도한 스타일을 적용하여 개별 구성요소 재사용을 방해합니다.)

체크박스 스타일링

체크박스의 경우 체크박스와 라벨 위치를 바꾸면 됩니다. 전체 프로젝트 디자인에서 체크박스의 모양을 처리하도록 하세요. 두 가지 접근 방식이 있습니다: 간단한 방법과 더 복잡한 방법. 복잡한 접근 방식은 다음과 같이 CSS를 사용합니다.

.cr-field {
  /* Target previous sibling */
  .cr-label:has(~ [type="checkbox"]) {
    /* Crucial: remove transform in all cases */
    transform: none !important;
    inset-block-start: 0;
    inset-inline-start: 0;
    padding-inline-start: 1.8rem;
    position: relative;
    display: inline-block;
    background: none;
    cursor: pointer;
  }

  .cr-input[type="checkbox"] {
    position: absolute;
    inset-inline-start: 0;
  }
}

더 간단한 해결 방법은 cr-field:

에 새 유형 속성을 명시적으로 할당하는 것입니다.

<!-- input.partial -->
<div class="cr-field cr-checkbox">
  <!-- ... -->
</div>

그런 다음 덜 복잡한 CSS를 사용하세요.

.cr-field.cr-checkbox {
  .cr-label {
    /* Same as above */
  }
  .cr-input {
    /* Same as above */
  }
  .cr-feedback {
    margin-block-start: 0;
    float: none;
  }
  .cr-required {
    position: static;
  }
}

이 간단한 선택기는 필수 별표, 도움말 텍스트, 피드백 메시지와 같은 다른 요소의 스타일을 지정하는 데 더 많은 유연성을 제공합니다. 때로는 덜 복잡한 접근 방식이 더 좋습니다.

가장자리 사례 해결

한 시나리오에는 맨 오른쪽에 가려진 필수 별표가 포함되어 있습니다. 라이브러리 구성 요소나 공유 CSS를 변경하지 않고도 컨테이너 스타일을 지정하여 가시성을 높일 수 있습니다.

/* Set container width to c-5 and display as block */

관련 내용:

1. 컨테이너 너비를 원하는 백분율로 설정하고 표시를 block으로 변경합니다(Angular 구성 요소의 기본값은 contents).
2. 내부 구성요소 너비를 각각 50%로 조정
3. 만료된 날짜와 필수 값 규칙을 모두 포함하여 오류 메시지를 "미래 날짜 추가"로 업데이트합니다.

맞춤형 체크박스 스타일링

프로젝트에는 독특한 체크박스 스타일이 있는 경우가 많습니다. 기존 CSS를 사용하여 MDN 예제를 사용하여 체크박스 스타일을 지정해 보겠습니다.

.gr-something .cr-field.cr-checkbox {
  .cr-input {
    /* Remove default appearance */
    appearance: none;
    width: 44px;
    height: 24px;
    border-radius: 12px;
    transition: all 0.4s;
  }
  /* ...rest of MDN-based styles... */
}

이는 지나치게 복잡한 선택기를 피하면 CSS 충돌을 방지할 수 있음을 보여줍니다.

숨겨진 필드와 자동으로 채워지는 필드

숨겨진 입력으로 검증이 단순화됩니다. cr-field 내에 있으면 유효성 검사가 간단합니다. 이 컨텍스트 외부의 숨겨진 입력에 대해 type="hidden" 속성과 스타일을 적절하게 소개합니다.

.cr-field.cr-hidden {
  .cr-label {
    display: none;
  }
  .cr-input[required] ~ .cr-required {
    display: none;
  }
  .cr-feedback {
    float: none;
    margin-block-start: 0;
    margin-inline-start: 0;
  }
}

자동 입력 필드의 경우 type="static"을 사용하여 자리표시자 라벨이 겹치는 것을 방지합니다.

.cr-field {
  /* Target previous sibling */
  .cr-label:has(~ [type="checkbox"]) {
    /* Crucial: remove transform in all cases */
    transform: none !important;
    inset-block-start: 0;
    inset-inline-start: 0;
    padding-inline-start: 1.8rem;
    position: relative;
    display: inline-block;
    background: none;
    cursor: pointer;
  }

  .cr-input[type="checkbox"] {
    position: absolute;
    inset-inline-start: 0;
  }
}

결론

우리의 목표는 기본 HTML 입력, 최소한의 유효성 검사 규칙, 유연한 Angular 형식, 속성 기반 스타일, 느슨한 양식 제출, 최소한의 교체 가능한 스타일이었습니다. 우리는 이러한 목표를 달성했다고 믿습니다.

위 내용은 유효성 검사 스타일 최종 수정의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!