HTML5에서 수직 범위 슬라이더를 만드는 방법: 브라우저 간 가이드
- DDD원래의
- 2024-10-27 01:10:30700검색
HTML5 범위 슬라이더의 수직 방향
양식 입력 슬라이더를 생성할 때 방향을 사용자 정의하는 것은 특정 UI 디자인에 필수적일 수 있습니다. 컨트롤은 기본적으로 수평 슬라이더를 제공합니다. 이 기사에서는 해당 기능을 지원하는 브라우저에서 수직으로 표시하는 기술을 살펴봅니다.
최신 브라우저(Chrome, Firefox)
최신 버전의 경우 Chrome 및 Firefox의 경우 수직 방향을 달성하기 위해 다음 CSS 스타일을 적용할 수 있습니다.
<code class="css">input[type=range] {
writing-mode: vertical-lr;
direction: rtl;
}</code>
이전 Chrome 브라우저
이전 버전의 Chrome 및 기타 Chromium- 기반 브라우저에서는 모양 속성을 사용하세요.
<code class="css">input[type=range] {
appearance: slider-vertical;
width: 16px;
}</code>
레거시 Firefox 브라우저
초기 Firefox 버전에서는 요소는 수직 방향을 강제할 수 있습니다:
<code class="html"><html orient="vertical">
...
<input type="range" />
...
</html></code>
예제 코드
다음은 브라우저 간 호환성을 위한 모든 기술을 결합한 전체 예입니다:
<code class="css">input[type=range][orient=vertical] {
writing-mode: vertical-lr;
direction: rtl;
appearance: slider-vertical;
width: 16px;
vertical-align: bottom;
}
input[type=range]:not([orient=vertical]) {
appearance: slider-vertical;
width: 16px;
}</code>
<code class="html"><input type="range" orient="vertical" /></code>
이러한 기술을 구현하면 수직 범위 슬라이더를 효과적으로 표시하여 최적의 호환성으로 여러 브라우저에서 양식 UI 디자인을 향상할 수 있습니다.
위 내용은 HTML5에서 수직 범위 슬라이더를 만드는 방법: 브라우저 간 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.