input range에 스타일 추가하기

https://www.cssportal.com/style-input-range/

Style Input Range - CSS Portal

---

익스플로어IE에만 적용되는 upper과 lower로 인해 overflow를 사용해 bar를 만들었다.

---

CSS prefixes

-webkit : 사파리, 크롬에 적용
-moz 파이어폭스
-o 오페라
-ms 익스플로어

 

아래는 타입이 range인 input에 먹였던 css코드이다.

input[type="range"] {
    overflow: hidden;
    height: 30px;
    -webkit-appearance: none;
    margin: 10px 0;
    width: 100%;
    background: transparent;
}

input[type="range"]:focus {
	outline: none;
}

input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 100%;
    cursor: pointer;
    border-radius: 5px;
    border: 2px solid #ff96ab;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 30px;
    height: 30px;
    background: #ff494f;
    box-shadow: 1px 1px 7px #d16a6e;
    cursor: pointer;
    box-shadow: -100vw 0 0 100vw #ff96ab;
}

 

 

---