두 가지 고유한 색상(녹색 및 회색)으로 HTML5 범위 입력의 스타일을 지정하려면 어떻게 해야 합니까?

고유한 색상으로 HTML5 범위 입력 스타일 지정

문제:

시각적으로 매력적인 범위 입력을 얻으려면 왼쪽 측면은 녹색이고 오른쪽은 회색.

해결책:

이 효과를 얻으려면 브라우저별 스타일이 필요합니다. 순수한 CSS 솔루션도 가능하지만 대상 브라우저에 따라 다릅니다.

Chrome용 CSS 솔루션:

• 입력[범위]에서 오버플로를 숨깁니다.
• 엄지 손가락 앞 공간을 원하는 왼쪽 색상으로 채웁니다. Shadow.

IE용 CSS 솔루션:

• 내장된 ::-ms-fill-lower 의사 요소를 사용하여 왼쪽 색상.

CSS 솔루션 Firefox:

• 내장된 ::-moz-range-progress 의사 요소를 사용하여 왼쪽 색상을 설정합니다.

예제 코드:

/* Chrome */
input[type='range']::-webkit-slider-thumb {
  box-shadow: -80px 0 0 80px #43e5f7;
}

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

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

이 CSS 코드는 범위 입력의 왼쪽이 녹색임을 보장합니다. 오른쪽은 회색으로 유지되어 원하는 시각적 효과를 제공합니다.

위 내용은 두 가지 고유한 색상(녹색 및 회색)으로 HTML5 범위 입력의 스타일을 지정하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!