양식 컨트롤 스타일 지정

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

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

<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로 정의합니다.

또한 font-size를 1rem 이상으로 변경해야 합니다. (대부분의 브라우저에서 기본값은 16px) <select> 요소입니다. 이렇게 하면 양식 컨트롤에 포커스가 있을 때 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;
}

display: none 또는 visibility: hidden 대신 position: absolute를 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 열기