CSS - input [type="range"] 투명하게 만들기 (feat. 브라우저 별 속성 -web-kit-appearance)

 

 

 

슬라이더 바를 만들기 위해  <input type="range" />  을 사용하였다.

그랬더니 요런 귀여운 슬라이더가 나왔다.

하지만 native 태그를 사용하게 되면 브라우저별 호환성이 좋지 않아 ui 가 깨진다.  (특히 IE10 에서는 아예 호환x)

그래서 input 을 투명하게 만들어 기능만 동작하게 하고 + 그 위에 예쁜 슬라이더 ui 를 올려서 꼭두각시 노릇을 하게 만드려고 한다.

 

기본 슬라이더 디자인

 

---

 

CSS - input [type="range"] 투명하게 만들기 (feat. 브라우저 별 속성  -web-kit-appearance)

 

HTML

<input
  type="range"
  min={min}
  max={max}
  step={step}
  value={value}
  onChange={e => setValue(e.target.valueAsNumber)}
/>

 

CSS

  input[type:range] {
    // 인풋창 투명하게 만들기 
    appearance: none; /* 공통 */

    // 인풋창 포커스 시 아웃라인 제거
    &:focus {
      outline: none;
    }
    
    // 인풋바 투명하게 만들기  
    /* Safari and Chrome */
    &::-webkit-slider-thumb {
      -webkit-appearance: none;
      background-color: transparent;
      width: 1rem;
      height: 1rem;
    }
    /* Firefox */
    ::-moz-range-thumb {
      -moz-appearance: none;
      background-color: transparent;
      width: 1rem;
      height: 1rem;

      border: none;
    }
    /* edge */
    ::-ms-thumb {
      display: none;
      background-color: transparent;
      width: 1rem;
      height: 1rem;
    }
  }