다양한 브라우저에서 HTML5 범위 입력 슬라이더의 모양을 어떻게 사용자 정의할 수 있습니까?

WebKit용 HTML5 범위 입력 슬라이더 색상 지정

WebKit 기반 브라우저는 일관된 모양의 기본 범위 입력 슬라이더를 표시합니다. 그러나 이 슬라이더의 모양을 수정하기 위해 사용자 정의 스타일을 추가하는 것은 어려울 수 있습니다.

Chrome의 경우:

• 오버플로 트릭: 숨기기 오버플로를 설정하여 기본 슬라이더: 입력 시 숨김
• 그림자 효과: 엄지손가락 왼쪽 공간을 원하는 색상으로 채우는 그림자 효과를 만듭니다.

IE 및 Firefox의 경우(기본 지원):

• ::-ms-fill-lower: IE에서 이 의사 요소를 사용하여 영역을 채웁니다. 엄지 손가락 아래.
• ::-moz-range-progress: Firefox에서 이 의사 요소를 사용하여 엄지 손가락 앞 부분을 채웁니다.

CSS 코드 구현:

/* Chrome */
@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;
  }
}

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

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

HTML 예:

<input type="range"/>

위 내용은 다양한 브라우저에서 HTML5 범위 입력 슬라이더의 모양을 어떻게 사용자 정의할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!