최신 CSS 기능을 갖춘 사용자 정의 스타일링 양식 입력

요즘에는 사용자 정의 확인란, 라디오 버튼 및 토글 스위치를 구축하는 것이 완벽하게 실현 가능하며 의미론 및 접근성을 유지합니다. JavaScript 코드 또는 추가 HTML 요소조차 필요하지 않습니다! 사실, 과거보다 최근보다 쉽습니다. 보자.

최종 효과는 다음과 같습니다.

전보다 훨씬 쉽습니다!

그 이유는 우리가 마침내 할 수 있기 때문입니다<input> ::before 및 ::after 태그 자체의 의사 요소가 스타일이되었습니다. 이것은 우리가 유지하고 설정할 수 있음을 의미합니다<input> 여분의 요소가없는 스타일. 이전에는 추가로 의존해야했습니다<div> 또는<code><span></span> 맞춤형 디자인을 구현합니다.

HTML 코드를 살펴 보겠습니다

여기에는 특별한 것이 없습니다. 이 HTML 코드를 사용하여 입력을 스타일링하면됩니다.

<input type="checkbox" id="c1">
<input type="radio" id="r1">
<input type="checkbox" id="s1">

이것은 HTML 부분에 관한 것입니다. 물론 name 과 id 속성뿐만 아니라 일치하는 이름을 추가하는 것이 좋습니다.<label></label> 요소:

 <label for="c1">확인란</label>
<input type="checkbox" id="c1">

<label for="r1">라디오 버튼</label>
<input type="radio" id="r1">

<label for="s1">스위치</label>
<input type="checkbox" id="s1" class="switch">

스타일 설정을 시작하십시오

먼저, 접두사 버전을 포함하여 appearance: none; 에 대한 지원을 확인합니다. appearance 속성은 요소에서 브라우저의 기본 스타일을 제거하도록 설계 되었기 때문에 핵심입니다. 브라우저 가이 속성을 지원하지 않으면 스타일이 적용되지 않으며 기본 입력 스타일이 표시됩니다. 이것은 절대적으로 괜찮고 점진적인 향상의 좋은 예입니다.

 @Supports (-webkit-Appearance : None) 또는 (-moz-appearance : none) {
  입력 [type = 'checkbox'],
  입력 [type = 'radio'] {
    -WebKit-Appearance : 없음;
    -Moz-appearance : 없음;
  }
}

지금은 appearance 여전히 작업 초안 단계에 있지만 다음은 지원이 있습니다.

이 브라우저는 Caniuse의 데이터를 지원하며 자세한 내용이 포함되어 있습니다. 이 숫자는 브라우저 가이 기능과 이후 버전 에서이 기능을 지원한다는 것을 나타냅니다.

데스크탑

모바일/태블릿

링크와 마찬가지로 양식 요소의 다른 상호 작용 상태를 고려해야합니다. 요소 스타일을 설정할 때 이러한 상태를 고려합니다.

• :checked
• :hover
• :focus
• :disabled

예를 들어, 다음은 토글 입력 스타일, 노브를 만들고 고려하는 방법은 다음과 같습니다 :checked 상태 :

 /* 스위치 컨테이너*/
.witch {
  너비 : 38px;
  Border-Radius : 11px;
}

/* 스위치 노브*/
.witch :: 이후 {
  왼쪽 : 2px;
  상단 : 2px;
  국경-라디우스 : 50%;
  너비 : 15px;
  높이 : 15px;
  배경 : var (-b, var (-국경));
  변환 : translatex (var (-x, 0));
}

/* 선택시 색상 및 위치 변경*/
.witch : 확인 {
  -ab : var (-active-inner);
  -X : 17px;
}

/* 입력이 비활성화되면 토글 노브의 불투명도를 줄입니다*/
.witch : 비활성화 : NOT (: Checked) :: 이후 {
  불투명도 : .6;
}

우리는 할 것입니다<input> 요소는 컨테이너로 사용됩니다. 입력 내부의 손잡이는 pseudo element ::after 에 생성됩니다. 다시 말하지만, 추가 마킹이 필요하지 않습니다!

데모에서 스타일을 열면 스타일 시트에서 재사용 가능한 값을 관리하는 좋은 방법이되었으므로 일부 CSS 사용자 정의 속성을 정의하고 있음을 알 수 있습니다.

 @Supports (-webkit-Appearance : None) 또는 (-moz-appearance : none) {
  입력 [type = 'checkbox'],
  입력 [type = 'radio'] {
    -Active : #275efe;
    -Active-inner : #fff;
    -포커스 : 2px rgba (39, 94, 254, .25);
    -국경 : #bbc1e1;
    -바디 호버 : #275efe;
    -팩터 : #fff;
    -장애 : #f6f8ff;
    -방지-인너 : #e1e6f9;
  }
}

그러나 우리가 사용자 정의 속성을 사용하는 또 다른 이유가 있습니다. 요소의 상태를 기반으로 값을 업데이트하는 데 매우 적합합니다! 여기서는 자세한 내용을 보지 않지만 다음은 다른 상태를 기반으로 사용자 정의 속성을 사용하는 방법의 예입니다.

 /* 기본값*/
입력 [type = 'checkbox'],
입력 [type = 'radio'] {
  -Active : #275efe;
  -국경 : #bbc1e1;
  테두리 : 1px solid var (-BC, var (-Border));
}

/* 기본값을 다시 작성*/
입력 [type = 'checkbox'] : Checked,
입력 [type = 'radio'] : 확인 된 {
  --b : var (-활성);
  -BC : var (-활성);
}

/* 선택하지 않고 비활성화되지 않은 경우 호버링시 다른 테두리 색상이 적용됩니다*/
입력 [type = 'checkbox'] : not (: checked) : not (: disabled) : hover,
입력 [type = 'radio'] : not (: Checked) : not (: disabled) : hover {
  -BC : var (-국경 호버);
}

접근성을 위해 맞춤 포커스 스타일을 추가해야합니다. 기본 개요는 우리가 설정 한 나머지 스타일처럼 반올림 할 수 없기 때문에 제거했습니다. 그러나 둥근 모서리가있는 box-shadow 개요처럼 작동하는 둥근 코너 스타일을 만들 수 있습니다.

 입력 [type = 'checkbox'],
입력 [type = 'radio'] {
  -포커스 : 2px rgba (39, 94, 254, .25);
  개요 : 없음;
  전환 : Box-Shadow .2S;
}

입력 [type = 'checkbox'] : 초점,
입력 [type = 'radio'] : Focus {
  Box-Shadow : 0 0 0 var (-초점);
}

HTML에서 직접 맞게 정렬하고 직접 설정할 수도 있습니다.<input> 원소 같은<label></label> 요소 스타일 :

 <label for="c1">확인란</label>
<input type="checkbox" id="c1">

입력 [type = 'checkbox'] 레이블,
입력 [type = 'radio'] 레이블 {
  디스플레이 : 인라인 블록;
  수직 정상 : 상단;
  /* 기타 스타일*/
}

입력 [type = 'checkbox'] : 비활성화 된 레이블,
입력 [type = 'radio'] : 비활성화 된 레이블 {
  커서 : 말도 안됩니다.
}

데모를 다시 표시하십시오.

요즘 사용자 정의 양식 스타일을 만드는 것이 얼마나 편리한 지 알 수 있기를 바랍니다. 양식 입력에 대한 의사 요소로 인해 마크 업이 적습니다. 사용자 정의 속성으로 인해 스타일 스위치가 적습니다. 그리고 @supports 덕분에 브라우저 지원이 매우 좋습니다.

결국, 이것은 우리가 과거에 다루어야 할 개발 경험보다 훨씬 낫습니다!