[CSS3] CSS3를 이용해 input range 스타일링하기
HTML5 요소를 이용해, 손쉽게 range 을 조절할 수 있습니다.
input element 의 type="range" 을 이용해서 말이죠.
물론, 최신 기술이다보니.. IE는 9버전 이상부터 지원합니다.
input[type=range] {
-webkit-appearance: none; /* 기본슬라이드 숨기기*/
width: 100%; /* Firefox에서는 특정한 넓이가 필요*/
background: transparent; /* Chrome에서 투명하게 출력 */
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
}
input[type=range]:focus {
outline: none; /* input range에 포커스 되었을 경우 기본 블러처리 제거 */
}
input[type=range]::-ms-track {
width: 100%;
cursor: pointer;
/* IE에서 기본슬라이드 숨기기 */
background: transparent;
border-color: transparent;
color: transparent;
}
아래의 코드를 보면서 설명하겠습니다.
실질적인 CSS들은 많지 않은데, 크로스브라우징에 맞춰 속성을 주다보니 길어졌습니다.
접두어들이 붙으며 헷갈릴 수 있으니 잘 구분해서 사용하시길 바랍니다.
아래는 제가 참고한 참고사이트입니다.
제 설명보다 더 자세히 되어 있습니다^^;
https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/
댓글
댓글 쓰기