CSS만 사용하여 두 가지 색상으로 HTML5 범위 입력 스타일을 지정할 수 있습니까?

다양한 색상으로 HTML5 범위 입력 스타일 지정

질문:

스타일 지정이 가능합니까? 슬라이더 양쪽에 다른 색상을 갖는 HTML5 범위 입력이 있습니까? 예를 들어 왼쪽은 녹색이고 오른쪽은 회색인가요? 이상적으로는 WebKit 브라우저와 호환되는 순수한 CSS 솔루션이 선호됩니다.

해결책:

물론 순수 CSS를 사용하여 이러한 사용자 정의를 달성하는 것이 가능합니다. 우리의 솔루션은 브라우저별 CSS 속성을 활용하여 다양한 브라우저를 대상으로 합니다:

Chrome:

input[type='range'] {
  overflow: hidden;
  width: 80px;
  -webkit-appearance: none;
  background-color: #9a905d;
}

input[type='range']::-webkit-slider-runnable-track {
  height: 10px;
  -webkit-appearance: none;
  color: #13bba4;
  margin-top: -1px;
}

input[type='range']::-webkit-slider-thumb {
  width: 10px;
  -webkit-appearance: none;
  height: 10px;
  cursor: ew-resize;
  background: #434343;
  box-shadow: -80px 0 0 80px #43e5f7;
}

Firefox:

input[type="range"]::-moz-range-progress {
  background-color: #43e5f7; 
}
input[type="range"]::-moz-range-track {  
  background-color: #9a905d;
}

인터넷 Explorer:

input[type="range"]::-ms-fill-lower {
  background-color: #43e5f7; 
}
input[type="range"]::-ms-fill-upper {  
  background-color: #9a905d;
}

HTML 스니펫:

<input type="range"/>

이 코드 스니펫은 왼쪽이 녹색이고 오른쪽이 회색인 범위 입력을 생성합니다. . 모든 주요 브라우저에서 전체 기능을 사용하려면 제공된 브라우저별 코드 블록을 모두 포함해야 합니다.

위 내용은 CSS만 사용하여 두 가지 색상으로 HTML5 범위 입력 스타일을 지정할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!