HTML5 범위 입력의 각 측면에 다른 색상을 적용하려면 어떻게 해야 합니까?

각 면에 서로 다른 색상을 사용하여 HTML5 범위 입력 스타일링

HTML5 범위 입력 슬라이더 전후의 다양한 색상을 얻으려면 브라우저가 필요합니다. 특정한 접근합니다.

Chrome:

• 입력 요소에서 오버플로: 숨김 및 너비를 설정하여 기본 슬라이더를 숨깁니다.
• 영역을 채웁니다. 원하는 배경색으로 엄지 왼쪽에 위치시키세요.
• 사용자 정의 슬라이더 엄지를 만들고 80px 위치에 배치하세요. 엄지손가락의 자연스러운 위치 오른쪽.
• 기본 엄지손가락을 완전히 덮을 수 있도록 사용자 정의 엄지손가락이 입력 너비보다 큰지 확인하세요.

IE:

• ::-ms-fill-lower 의사 요소를 활용하여 배경색을 왼쪽으로 설정합니다.
• ::-ms-fill-upper를 사용하여 배경색을 엄지 오른쪽으로 설정하세요.

Firefox:

• ::-moz-range-progress 의사 요소를 활용하여 배경색을 왼쪽으로 설정합니다. Thumb.
• ::-moz-range-track을 사용하여 트랙의 배경색을 설정합니다.

예제 코드:

@media screen and (-webkit-min-device-pixel-ratio:0) {
  input[type='range'] {
    overflow: hidden;
    width: 80px;
    background-color: #9a905d;
  }

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

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

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

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

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

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

<input type="range" />

위 내용은 HTML5 범위 입력의 각 측면에 다른 색상을 적용하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!