HTML5 범위 슬라이더가 모든 브라우저에서 수직으로 표시되도록 하려면 어떻게 해야 합니까?-CSS 튜토리얼-php.cn

HTML5 범위 슬라이더가 모든 브라우저에서 수직으로 표시되도록 하려면 어떻게 해야 합니까?

Barbara Streisand

풀어 주다： 2024-10-27 09:48:03

원래의

711명이 탐색했습니다.

How can I make an HTML5 range slider display vertically across all browsers?

HTML5 범위 슬라이더의 수직 방향

HTML5에서 범위 슬라이더를 수직으로 표시하는 것은 브라우저 간 불일치로 인해 어려운 것으로 입증되었습니다. 이를 위해서는 브라우저의 지원에 따라 다양한 방법이 필요합니다.

최신 브라우저(Chrome 및 Firefox >=2024)

최신 버전의 Chrome 및 Firefox의 경우 , 다음 해결 방법이 효과적인 것으로 입증되었습니다.

<code class="css">input[type=range] {
  writing-mode: vertical-lr;
  direction: rtl;
  width: 16px;
}</code>

로그인 후 복사

이 접근 방식은 슬라이더를 수직 방향으로 정렬합니다. rtl 위로 밀면 값이 증가하고 아래로 밀면 값이 감소합니다.

레거시 Chrome(및 기타 Chromium 기반 브라우저)

이전 버전의 Chrome 및 Chromium 기반 브라우저의 경우 다음이 작동합니다.

<code class="css">input[type=range] {
  appearance: slider-vertical;
  width: 16px; /* Optional, suggested to match newer browsers */
}</code>

로그인 후 복사

이 솔루션을 사용하면 슬라이더가 원하는 스타일(예: 트랙 및 썸 모양)을 상속하지 않을 수 있지만 세로로 표시됩니다.

레거시 Firefox

이전 버전의 Firefox의 경우 orient 속성은 html 요소가 필요합니다.

<code class="html"><html orient="vertical">
  <body>
    <input type="range" />
  </body>
</html></code>

로그인 후 복사

또한 다음 CSS가 필요합니다.

<code class="css">input[type=range] {
  vertical-align: bottom;
}</code>

로그인 후 복사

이 방법은 슬라이더를 수직으로 정렬하지만 스타일 처리 및 사용자 상호 작용에 제한이 있을 수 있습니다. .

호환 가능한 예

다음 코드 조각은 모든 주요 브라우저에서 작동하는 예를 제공합니다(2024년 4월 기준).

<code class="html"><input type="range" orient="vertical" /></code>

로그인 후 복사

<code class="css">input[type=range][orient=vertical] {
  writing-mode: vertical-lr;
  direction: rtl;
  appearance: slider-vertical;
  width: 16px;
  vertical-align: bottom;
}</code>

로그인 후 복사

이 포괄적인 솔루션은 범위 슬라이더가 다양한 브라우저 버전에서 일관된 방식으로 수직으로 표시되도록 보장합니다.

위 내용은 HTML5 범위 슬라이더가 모든 브라우저에서 수직으로 표시되도록 하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!