요소 만 사용하여 사용자 정의 스코프 슬라이더를 만드는 방법을 보여줍니다. 튜토리얼에는 브라우저 기본 스타일을 재설정 및 비활성화하는 등 입력 요소를 사용자 정의하고 슬라이더 스타일 설정 및 를 사용하여 슬라이딩 그라디언트 효과 생성을 포함하여 입력 요소를 사용자 정의하는 방법을 다룹니다. 또한 클릭하면 경계 전용 원에서 슬라이더를 전체 원으로 변환하고 호버링시 색상을 어둡게하는 등 사용자 상호 작용을 향상시키기 위해 미묘한 애니메이션을 추가하는 방법에 대해 설명합니다. 이 기술은 기본 기능을 유지하고 키보드 내비게이션을 지원하여 맞춤형 범위 슬라이더를위한 다목적이고 액세스 할 수있는 솔루션을 제공합니다.
<input type="range">
키 포인트 : border-image
<input type="range">
그러나 요소는 스타일이 어렵습니다. 대부분의 온라인 솔루션은 JavaScript 및 Verbose Code에 의존합니다. 더 나쁜 것은, 일부 기술은 또한 요소의 접근성을 파괴 할 수 있습니다. 따라서 접근성에 영향을 미치지 않고 순수한 CSS를 더 잘 활용하는 방법을 살펴 보겠습니다. 다음 Codepen 데모는 우리가 구축 할 내용을 보여줍니다.
border-image
및 기타 공통 속성을 사용하는 것입니다.
이 단계에서는 슬라이더와 기본 스타일 만 표시됩니다. 슬라이더 요소 스타일을 설정
appearance: none
<code class="language-html"><input type="range" min="0" max="100" step="1" value="20"></code>
<code class="language-html"><input type="range" min="0" max="100" step="1" value="20"></code>를 추가하십시오
위 내용은 CSS를 사용하여 사용자 정의 범위 슬라이더를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!