HTML5 범위 슬라이더가 모든 브라우저에서 수직으로 표시되도록 하려면 어떻게 해야 합니까?
- Barbara Streisand원래의
- 2024-10-27 09:48:03755검색
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!