이 모듈에서는 양식 컨트롤의 스타일을 지정하는 방법과 다른 사이트 스타일과 일치하는 방법을 알아봅니다.
사용자가 옵션을 선택하도록 지원
<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;
}
이해도 테스트
양식 컨트롤 스타일 지정에 관한 지식 테스트
양식 컨트롤의 플랫폼 네이티브 스타일 지정을 어떻게 삭제할 수 있나요?
revert: all;
사용appearance: none;
사용appearance: revert;
사용revert: appearance;
사용