방법 -webkit-슬라이더 엄지 손가락

을 내가 CSS를 CSS의방법 -webkit-슬라이더 엄지 손가락

#counter { 
    -webkit-appearance: none; 
    background-color: silver; 
    width: 200px; 
    height:10px; 
    border-radius:50px; 
    border-color:rgb(240, 61, 37); 
} 

#counter::-webkit-slider-thumb { 
    -webkit-appearance: none; 
    width:15px; 
    height:15px; 
    border-radius:50px; 
    content:"1"; 
    background:rgb(240, 61, 37); 
    opacity:0.95; 
}

라이브 데모 here

content:"1";을 다음과 같이 입력 범위

<input id="counter" type="range" min="0" ></input>

의 입력이 출력에서 빨강 색 노브로 일부 텍스트를 설정하는 방법, 전혀 작동하지 않습니다.

출처

2013-01-24 Sudarshan

::-webkit-slider-thumbcontent 속성을 사용할 수 없습니다. 대신 배경 이미지를 설정해보십시오.

출처

2013-01-24 13:18:19 BenM

답장을 보내 주셔서 감사합니다.하지만 내 이미지 콘텐츠가 1 2 3 등이 100이되어야하는 것처럼 동적이어야하며,이를 가능하게하는 해결책이 있습니까? – Sudarshan

PHP를 사용하여 동적 이미지를 생성 할 수 있습니다. 또는 jQuery (절대 위치)를 사용하여 요소를 만들고 슬라이더와 함께 이동시킬 수 있습니다. – BenM

답변을 주셔서 감사합니다. 일부 참고 문헌을 가르쳐 주시겠습니까? 나는 PHP에 다소 익숙합니다. – Sudarshan

방법 -webkit-슬라이더 엄지 손가락

답변

관련 문제