4
나는 CSS을 사용하여 input[type=range]으로 스타일을 지정했으며 thumb 및 track으로 작성했습니다.
브라우저 세 개 (-ms, -moz, -webkit)의 모든 접두사가 있습니다.Webkit 용 CSS의 입력 범위 스타일링이 작습니까?
하지만 크롬처럼 웹킷 브라우저에서 progress을 사용하는 경우 어떤 접두어 접두사가 적합하지 않은지 알 수 없습니다. Internet Explorer 및 Microsoft Edge에서 -ms-fill-lower이 효과적입니다.
Firefox에서 -moz-range-progress을 사용하면 문제가 해결되었습니다. // 파이어 폭스, 인터넷 익스플로러,하지만 크롬에서 다르게 보이는 :
input[type=range] {
\t /*removes default webkit styles*/
\t -webkit-appearance: none;
\t
\t /*fix for FF unable to apply focus style bug */
\t border: 1px solid white;
\t
\t /*required for proper track sizing in FF*/
\t width: 350px;
}
/* Webkit, Chrome & Safari */
input[type=range]::-webkit-slider-runnable-track {
\t width: 300px;
\t height: 5px;
\t background: #ccc;
\t border: none;
\t border-radius: 3px;
}
input[type=range]::-webkit-slider-thumb {
\t -webkit-appearance: none;
\t border: none;
\t height: 16px;
\t width: 16px;
\t border-radius: 50%;
\t background: #004d66;
\t margin-top: -7px;
}
input[type=range]:focus {
\t outline: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
\t background: #ddd;
}
/* moz://a Firefox */
input[type=range]::-moz-range-track {
\t /* width: 150px;
\t height: 5px; */
\t background: #ccc;
\t border: none;
\t border-radius: 3px;
}
input[type=range]::-moz-range-thumb {
\t border: none;
\t height: 16px;
\t width: 16px;
\t border-radius: 50%;
\t background: #004d66;
}
input[type=range]::-moz-range-progress {
\t background: #33ccff;
\t border-radius: 10px;
\t height: 5px;
}
/*hide the outline behind the border*/
input[type=range]:-moz-focusring{
\t outline: 1px solid white;
\t outline-offset: -1px;
}
/* Microsoft */
input[type=range]::-ms-track {
\t
\t height: 2px;
\t /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
\t background: transparent;
\t
\t /*leave room for the larger thumb to overflow with a transparent border */
\t border-color: transparent;
\t border-width: 6px 0;
\t /*remove default tick marks*/
\t color: transparent;
}
input[type=range]::-ms-thumb {
\t border: none;
\t height: 16px;
\t width: 16px;
\t border-radius: 50%;
\t background: #004d66;
\t margin-top: 1px;
}
input[type=range]::-ms-fill-lower {
\t background: #33ccff;
\t border-radius: 10px;
\t height: 5px;
}
input[type=range]::-ms-fill-upper {
\t background: #ccc;
\t border-radius: 10px;
}
input[type=range]:focus::-ms-fill-lower {
\t background: #44ddff;
}
input[type=range]:focus::-ms-fill-upper {
\t background: #ddd;
}<input type="range" />시도했지만 다중 입력 [TYPE = 범위] s는 하나 개의 문서에있는 경우는 이상하게 동작.
그래서, 질문은
엄지 손가락이 이미 전달되었으며 CSS 만 사용하여 스타일링 트랙에 대한 올바른 접두어가 있습니까?
[mcve]를 제공해 주실 수 있습니까? 질문에 해당 스 니펫을 입력하십시오. –
@MrLister 스타일 시트를 추가했습니다. [이] (http://brennaobrien.com/blog/2014/05/style-input-type-range-in-every-browser.html) 코드는 내 기반입니다. –