[CSS] HTML input 요소 커스텀하기

개요

안녕하세요!

이번에는 input을 커스텀하기 위한 style 코드를 알아보겠습니다.

 

왜 input 요소에 스타일링이 필요했냐면, 저는 클릭하면 텍스트가 클립보드에 복사되는 기능을 하는 버튼을 만들어야 했습니다.

window 스펙에서 제공하는 docuement.commandexec() 메서드를 사용하고 'copy' 매개변수를 주면 텍스트를 복사를 할 수 있겠더라구요.

그런데, commandexec()메서드의 타겟이 되는 DOM을 지정을 해줘야 하는데, 그 방법이  input과 textarea 요소에서만 select()해줘야 했습니다. 그니까 input요소를 쓸 수밖에 없었습니다. 

 

이런 input 요소의 기본 style을 없애려고 합니다.

사용자 입장에서는 input 박스 느낌을 주지 않고 누르면 복사가 되는 느낌을 줘야 했기 때문에 브라우저에서 기본적으로 제공하는 input스타일링을 없애야 했습니다.

 

자, 그럼 지금부터 input의 기본 스타일링을 모두 없애보는 코드를 알아보겠습니다.

⚡️ 짠!

.email {
  width: 100%;
  border: none;
  cursor: pointer;
  overflow: visible;
  -ms-user-select: none; 
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

.email:focus {
  outline: none;
}

이 코드처럼 작성하면 기본 input에 반영되어 있던, 검정색 border를 없애고, 포커스가 들어갔을 때도, 파란색 하이라이트를 없앨 수 있습니다. 그리고, 버튼인데 텍스트가 선택이 되면 안되므로 텍스트 선택이 되지 않도록 user-select: none 설정도 브라우저 렌더링 엔진 별로 해주었습니다.

 

그리고 cursor기능을 줘서 버튼의 느낌을 살렸습니다.