[ CSS ] input type="color" 디자인 변경하기

 

js로 그림판 만들기를 하는데 현재 펜슬의 색상 보여주기와 색상 선택을 위한 input의 디자인이 너무 별로였다.

단순히 색상만 나타났으면 좋겠는데 불필요한 border이며 background color며..border-radius도 변경이 안되던 ㅠㅠ..

하지만 구글링해서 안나오는 건 없었고  ♪( 'ω' و(و"

자주 쓸 것 같아서  기록해놓기로 했다.

 

 

webkit-specific selectors를 사용하여 입력의 색상이 아닌 부분을 대부분 숨기는 것이다. 

( 물론 이 문법이 mdn에 따르면 firefox밖에 지원을 안한다고 한다. )

 

 

여기서 겉부분은 회색배경+border를 가진 공간의 디자인이고

안쪽부분은 선택한 색상을 보는부분 + border를 가진 부분이라고 생각하면 된다.

 

/* 겉부분의 디자인 변경 */
#deco {
  width: 50px;
  height: 50px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
  border: none;
}
/* 안쪽부분의 디자인 변경 */
#deco::-webkit-color-swatch {
  border-radius: 30px;
  border: none;
}

위의 코드를 쓰면 왼쪽 디자인에서 오른쪽 디자인으로 바뀐다!

 

 

[ 출처 ]

https://developer.mozilla.org/en-US/docs/Web/CSS/::-moz-color-swatch

::-moz-color-swatch - CSS: Cascading Style Sheets | MDN

https://youtu.be/9Ds6dzhda0c