CSS를 사용하여 HTML5 범위 입력의 양쪽 색상을 다르게 지정하려면 어떻게 해야 합니까?

HTML5 범위 입력의 양쪽 색상을 다르게 지정

HTML5 범위 입력의 왼쪽과 오른쪽에 대비되는 색상을 적용하는 것은 공통 요청. 사용자가 슬라이더와 상호 작용하면 색상이 동적으로 변경되어 입력 값에 대한 시각적 피드백을 제공합니다. 순수한 CSS에서 이 효과를 얻는 것은 어려운 것처럼 보일 수 있지만 가능합니다.

Chrome의 경우 입력에서 오버플로를 숨기고 상자 그림자를 사용하여 나머지를 채우는 것이 비결입니다. 원하는 색상으로 공간을 이 기술은 사용자 정의 색상으로 슬라이더의 왼쪽을 효과적으로 칠합니다.

IE 및 Firefox의 경우 내장된 CSS 의사 요소를 활용할 수 있습니다.

• IE: ::-ms-fill-lower를 사용하면 슬라이더의 아래쪽 부분에 스타일을 지정하여 녹색을 활성화할 수 있습니다. color.
• Firefox: ::-moz-range-progress는 유사한 제어 기능을 제공하므로 슬라이더의 채워진 부분에 대한 색상을 정의할 수 있습니다.

CSS 솔루션을 설명하려면 다음 코드를 참조하세요.

@media screen and (-webkit-min-device-pixel-ratio:0) {
  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;
  }
}

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;
}

이 CSS 코드를 사용하면 슬라이더 양쪽에 다양한 색상을 표시하는 HTML5 범위 입력으로 웹 애플리케이션을 위한 시각적으로 매력적이고 사용자 친화적인 인터페이스를 만듭니다.

위 내용은 CSS를 사용하여 HTML5 범위 입력의 양쪽 색상을 다르게 지정하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!