입력 범위 슬라이더 막대를 만들려고 하는데 문제가 발생했습니다.
본체 { 내용 정당화: 센터; 항목 정렬: 중앙; 최소 높이: 100vh; 배경: #151515; } #범위값 { 위치: 상대; 디스플레이: 블록; 글꼴 크기: 6em; 색상: #999; 글꼴 두께: 400; } .범위 { 배경: 선형 그라데이션(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab) !중요; 너비: 400px; 높이: 5px; -웹킷 모양: 없음; 배경: #111; 개요: 없음; 테두리 반경: 15px; 상자 그림자: 삽입 0 0 5px rgba(0, 0, 0, 1); } .range::-webkit-slider-thumb { -웹킷 모양: 없음; 너비: 15px; 높이: 15px; 테두리 반경: 50%; 배경: 파란색; 커서: 포인터; 상자 그림자: -507px 0 0 500px 빨간색; }
0문제는 그릴 때 이 큰 빨간색 영역이 입력 슬라이더 내에 남아 있기를 원한다는 것입니다. 유일한 해결책은
overflow:hidden
을.range
에 적용하는 것입니다. 하지만 파란색 점 버튼이 사라집니다.overflow:hidden
을box-shadow
에 적용할 수 있는 방법이 있나요? 아니면 작동하게 만드는 다른 방법에 대한 단서가 있나요?최종 결과는 다음과 같습니다 =>
감사합니다.
도움이 될지 모르겠지만 제가 수행한 리팩토링은 다음과 같습니다. 아마도 귀하의 작업에 맞게 약간의 수정을 가할 수 있을 것입니다.
HTML
으아악CSS
으아악JS
으아악원하는대로 조절하시면 됩니다. 도움이 되었기를 바랍니다.