양식 컨트롤 스타일 지정

이 모듈에서는 양식 컨트롤의 스타일을 지정하는 방법과 다른 사이트 스타일과 일치하는 방법을 알아봅니다.

사용자가 옵션을 선택하도록 지원

<select> 요소

<select> 요소의 기본 스타일이 멋져 보이지 않고 브라우저 간 모양도 일관되지 않습니다.

먼저 화살표를 변경해 보겠습니다.

select {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-color: #fff;
    background-image: url(arrow.png);
    background-repeat: no-repeat;
    background-position: right .7em top 50%, 0 0;
    background-size: .65em auto;
}

<select> 요소의 기본 화살표를 삭제하려면 CSS appearance 속성을 사용하세요. 원하는 화살표를 표시하려면 화살표를 background로 정의합니다.

또한 <select> 요소의 font-size를 최소한 1rem(대부분의 브라우저에서 기본값 16픽셀)로 변경해야 합니다. 이렇게 하면 양식 컨트롤에 포커스가 있을 때 iOS Safari에서 페이지 확대/축소가 수행되지 않습니다.

물론 브랜드 색상과 일치하도록 요소 색상을 변경할 수도 있습니다. 간격 :hover 및 :focus 스타일을 더 추가하면 이제 <select> 요소의 모양이 브라우저 간에 일관되게 표시됩니다.

2019년처럼 선택한 스타일 지정 데모에서 확인하세요.

<option> 요소는 어떤가요? <option> 요소는 대체 요소라고 하며 표현은 CSS의 범위를 벗어납니다. 이 문서 작성 시점부터 <option> 요소의 스타일을 지정할 수 없습니다.

체크박스 및 라디오 버튼

<input type="checkbox"> 및 <input type="radio">의 모양은 브라우저에 따라 다릅니다.

여러 브라우저에서 데모를 열어 차이점을 확인하세요. 체크박스와 라디오 버튼이 브랜드와 일치하고 여러 브라우저에서 동일하게 표시되는지 확인하는 방법을 알아보겠습니다.

이전에는 개발자가 <input type="checkbox"> 및 <input type="radio"> 컨트롤의 스타일을 직접 지정할 수 없었습니다. 이제 체크박스와 라디오 버튼의 스타일을 유사 요소를 통해 지정할 수 있습니다. 또는 다음 대체 기법을 사용하여 이러한 요소의 맞춤 스타일을 만들 수 있습니다.

먼저 기본 체크박스와 라디오 버튼을 시각적으로 숨깁니다.

input[type="radio"],
input[type="checkbox"] {
   position: absolute;
   opacity: 0;
}

position: absolute를 display: none 또는 visibility: hidden 대신 opacity: 0와 함께 사용하여 컨트롤이 시각적으로만 숨겨지도록 하는 것이 중요합니다. 이렇게 하면 브라우저의 접근성 트리에 여전히 노출됩니다. 시각적으로 숨겨진 양식 컨트롤이 대체 요소의 '위에' 배치되도록 하려면 스타일을 추가로 지정해야 할 수 있습니다. 이렇게 하면 스크린 리더가 사용 설정되어 있을 때 또는 스크린 리더가 사용 설정된 터치 기기를 사용할 때 이러한 요소 중 하나에 마우스를 가져가면 터치로 탐색할 때 시각적으로 숨겨진 컨트롤을 찾을 수 있으며 스크린 리더의 보이는 포커스 표시기는 일반적으로 컨트롤이 화면에 렌더링되는 위치에 표시됩니다.

다양한 옵션을 사용하여 맞춤 체크박스와 라디오 버튼을 표시할 수 있습니다. ::before CSS 의사 요소와 CSS background 속성을 사용하거나 인라인 SVG 이미지를 사용합니다.

input[type="radio"] + label::before {
  content: "";
  width: 1em;
  height: 1em;
  border: 1px solid black;
  display: inline-block;
  border-radius: 50%;
  margin-inline-end: 0.5em;
}

input[type="radio"]:checked + label::before {
  background: black;
}

CSS를 사용하면 체크박스와 라디오 버튼이 브랜드 스타일과 일치하도록 다양한 가능성이 있습니다.

<input type="checkbox">, <input type="radio"> 및 맞춤 체크박스 스타일의 스타일 지정에 대해 자세히 알아보세요.

사이트의 색상을 양식 컨트롤에 사용하는 방법

코드 한 줄로 사이트 스타일을 양식 컨트롤에 적용하시겠습니까? accent-color CSS 속성을 사용하여 이 작업을 수행할 수 있습니다.

checkbox {
  accent-color: orange;
}

이해도 테스트

양식 컨트롤 스타일 지정에 관한 지식 테스트

자료

• 강조 색상
• <select> 요소 스타일 지정
• 스타일이 지정된 양식 컨트롤의 접근성
• UI 열기