[CSS] textarea resizer style custom

textarea의 기본 resizer

textarea태그는 resize 기능을 가지고 있다. 이 기능 단추를 커스텀해야하는 상황이 생겨서 열심히 서치하고 시도해 본결과 성공했다. 

기본 단추에 제공되는 아이콘 말고 디자인된 아이콘을 넣는게 필요해서 ::-webkit-resizer 를 사용하여 background-image에 해당 원하는이미지를 넣어 완성하였다.

 

이미지까지는 원활하게 넣었지만 특정 사이즈일때 아래와 같이 라운드한 오른쪽 하단이 비어보이는 현상이 생겼다.

textarea 오른쪽 하단 비어보이는현상

 

한참을 해매면서 resizer 오른쪽 하단의 비는 현상을 없애기위해 border-radius를 ::-webkit-resizer에 열심히 줘도 삐져나와서 시도해 본 끝에 

::-webkit-scrollbar-corner에 줘야한다는걸 알았다!

 

&::-webkit-scrollbar-corner {
  border-radius: $radius-full;
}

 

그리고 원하는 resizer 이미지를 넣을때 주의할 점은 background: 축약 스타일을 쓰면 적용이 되지 않아서 background-image, background-repeat, background-size 등 background에 관한 스타일을 다 풀어서 나열해야한다.