진행률 표시줄처럼 보이도록 HTML5 범위 입력 유형을 사용자 정의하는 방법은 무엇입니까?

HTML5 범위 입력 유형의 모양 사용자 정의

HTML5 범위 입력 유형은 지정된 범위 내에서 사용자 입력을 수집하는 편리한 방법을 제공합니다. 기본적으로 브라우저는 기본 스타일로 범위 입력을 렌더링하는데, 이는 항상 원하는 UI 디자인과 일치하지 않을 수 있습니다. 이 기사에서는 CSS를 사용하여 범위 입력 유형의 모양을 맞춤설정하여 진행률 표시줄과 같은 미학을 구현하는 방법을 살펴보겠습니다.

문제 설명:

" 진행률 표시줄과 비슷하게 HTML5 범위 입력 유형의 모양을 수정하고 싶지만 CSS 클래스로 CSS 속성을 적용해도 아무런 효과가 없는 것 같습니다."

해결책:

범위 입력 유형의 모양을 사용자 정의하려면:

1. 기본 스타일 제거: -webkit-appearance: none !important CSS 속성을 사용하여 브라우저의 기본값을 재정의합니다. 스타일링. 이렇게 하면 적용한 모든 사용자 정의 스타일이 우선 적용됩니다.
2. 배경 구성: 배경 속성을 설정하여 범위 입력 트랙의 배경 색상과 높이를 사용자 정의합니다.
3. Thumb 사용자 정의: -webkit-slider-thumb 의사 요소의 배경, 높이 및 너비 속성을 설정하여 썸(손잡이)의 모양을 수정합니다.

CSS 코드:

<code class="css">input[type='range'] {
    -webkit-appearance: none !important;
    background: red;
    height: 7px;
}

input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    background: blue;
    height: 10px;
    width: 10px;
}</code>

이 CSS 코드를 적용하면 표준 범위 입력 유형을 색상이 지정된 트랙과 핸들이 포함된 맞춤 스타일 진행 표시줄로 변환할 수 있습니다.

위 내용은 진행률 표시줄처럼 보이도록 HTML5 범위 입력 유형을 사용자 정의하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!