HTML5에서 수직 범위 슬라이더를 만드는 방법: 브라우저 간 가이드-CSS 튜토리얼-php.cn

HTML5에서 수직 범위 슬라이더를 만드는 방법: 브라우저 간 가이드

DDD

풀어 주다： 2024-10-27 01:10:30

원래의

833명이 탐색했습니다.

How to Create Vertical Range Sliders in HTML5: A Cross-Browser Guide

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!