웹 기능:
::selection
user-select
accent-color
color-scheme
scrollbar-color
scrollbar-width
:user-valid 및 :user-invalid
:placeholder-shown
::placeholder
field-sizing
resize (CSS 속성)
맞춤설정 가능한 <select>
appearance
:has()
::file-selector-button
브라우저에서 생성된 대부분의 UI는 CSS를 사용하여 어느 정도 맞춤설정할 수 있습니다. 최신 기능이 필요하더라도 이전 브라우저에서 정상적으로 성능이 저하되므로 폴리필이나 대체가 필요하지 않은 경우가 많습니다.
브라우저 UI (양식 컨트롤, 스크롤바, 선택, 오류 메시지 등)를 다시 만들기 전에 먼저 다음을 확인하세요.
- 최신 CSS를 사용하더라도 브라우저 UI를 필요에 맞게 충분히 맞춤설정할 수 없습니다.
- 원하는 맞춤설정이 내장 UI를 다시 만드는 데 따른 장단점(특히 네이티브 UI가 무료로 제공하는 접근성 시맨틱스, 키보드 처리, IME, AT 통합의 손실)을 정당화할 만큼 충분히 중요합니다.
가능한 맞춤설정의 예는 다음과 같습니다.
::selection를 사용하여 강조 표시된 텍스트 색상을 맞춤설정합니다.- 콘텐츠 텍스트에
user-select: none를 적용하지 마세요. 복사하여 붙여넣기, 번역 도구, AT '여기에서 읽기' 동작이 중단됩니다. Chrome으로 제한합니다 (드래그 핸들, 툴바, 중복 버튼 라벨). accent-color를 사용하여 페이지의 강조 색상을 브라우저에서 생성된 UI에 적용합니다.color-scheme를 사용하여 브라우저 UI를 밝은 모드/어두운 모드에 맞게 조정합니다.scrollbar-color를 사용하여 스크롤바 색상을 맞춤설정하고scrollbar-width를 사용하여 스크롤바 두께를 제어합니다. 엄지손가락이 트랙과 명확하게 구분되도록 유지하고 (3:1 이상) 스크롤 가능한 영역에scrollbar-width: none를 설정하지 마세요 (스크롤이 다른 어포던스로 완전히 대체된 경우에만 사용).- 유효성 스타일 지정에는
:user-invalid/:user-valid를 사용하고:invalid/:valid는 사용하지 마세요. 사용자가 필드와 상호작용한 후에만 일치하므로 페이지 로드 시 필수 빈 필드를 오류로 표시하는 적대적인 기본값을 피할 수 있습니다.input를 광범위하게 타겟팅할 때 (예:input:not(input[type="range"]):user-valid) 범위 슬라이더를 제외하여 슬라이더를 조정해도 필드 유효성 테두리나 배경이 적용되지 않도록 합니다. - 버튼과 텍스트 필드(
<textarea>포함)는 일반적으로 일반 요소로 스타일을 지정할 수 있습니다. font-size를 사용하여 타이포그래피를 제어하는 다른 텍스트 속성과 크기를 조정합니다.
텍스트 필드 스타일 지정 (<input> 및 <textarea>)
대부분의 스타일 지정 목적 (예: 색상, 테두리, 배경, 서체 등)에서 이러한 요소를 일반 텍스트 컨테이너로 취급합니다.
:placeholder-shown및::placeholder를 사용하여 입력 자리표시자의 스타일을 지정합니다.field-sizing: content를 사용하여 텍스트 입력란의 크기를 콘텐츠에 맞게 조정합니다.<textarea>요소의 경우resize: vertical를 사용하여 가로 크기 조절을 사용 중지하거나resize: none를 사용하여 모든 크기 조절을 사용 중지합니다.
객관식 컨트롤 (선택, 라디오, 체크박스)
- 드롭다운에 표시된 여러 옵션 중 하나를 선택하려면
<select>+appearance: base-select+::picker(select)를 사용합니다. 자세한 내용은 브랜드 선택 스타일 지정을 참고하세요. - 페이지에 인라인으로 배치된 여러 옵션 중 하나 이상을 선택하는 경우: 각 옵션에 대해
<label>내에<input type=checkbox>또는<input type=radio>를 사용합니다.label:has(:checked)를 통한 스타일 appearance: none+ 생성된 콘텐츠 (::before/::after) 또는 배경 이미지를 통해 체크박스, 라디오, 스위치의 스타일을 지정하여 선택된 상태를 그립니다.
텍스트가 아닌 <input>(버튼, 슬라이더, 파일 입력 등)
- 파일 입력:
::file-selector-button를 사용하여 버튼의 스타일을 지정합니다. <input>를type가button,submit또는reset인 경우와 함께 사용하지 마세요. 대신<button>를 사용하고 일반 요소로 스타일을 지정하세요.- 슬라이더: 더 세부적으로 제어하려면
appearance: none+ thumb 의사 요소 (::-webkit-slider-thumb,::-moz-range-thumb등)와 track 의사 요소 (::-webkit-slider-runnable-track,::-moz-range-track등)를 사용합니다.