유효성 검사 스타일 최종 수정-CSS 튜토리얼-php.cn

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

Mary-Kate Olsen

풀어 주다： 2025-01-17 18:07:08

원래의

703명이 탐색했습니다.

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

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

체크박스 스타일링

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

<code class="language-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;
  }
}</code>

로그인 후 복사

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

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

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

로그인 후 복사

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

<code class="language-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;
  }
}</code>

로그인 후 복사

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

Validation style final tweaks

가장자리 사례 해결

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

<code class="language-css">/* Set container width to c-5 and display as block */</code>

로그인 후 복사

Validation style final tweaks

맞춤형 체크박스 스타일링

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

<code class="language-css">.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... */
}</code>

로그인 후 복사

Validation style final tweaks

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

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

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

<code class="language-css">.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;
  }
}</code>

로그인 후 복사

Validation style final tweaks

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

<code class="language-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;
  }
}</code>

로그인 후 복사

Validation style final tweaks