웹 폼에서 파일 업로드 버튼은 기본 스타일이 투박해 디자인과 어울리지 않는 경우가 많습니다. CSS 가상 요소(의사 요소)인 ::file-selector-button을 사용하면 별도의 JavaScript 없이도 파일 업로드 버튼에 원하는 스타일을 적용할 수 있습니다.
다만 이 가상 요소를 완전히 지원하는 브라우저는 현재 Firefox와 Android용 Firefox로 제한적입니다. 따라서 Safari, Chrome, Opera 등 웹킷(Webkit) 기반 브라우저까지 모두 지원하려면 접두사가 붙은 ::-webkit-file-upload-button을 함께 사용해야 합니다.
기본 문법
CSS file-selector 관련 선택자의 기본 문법은 다음과 같습니다.
Selector::file-selector-button {
attribute: /*value*/
}
Selector::-webkit-file-upload-button {
attribute: /*value*/
}예제 1: ::file-selector-button 기본 활용
다음 예제는 ::file-selector-button 선택자에 마우스 오버(hover) 효과를 적용한 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
input[type=file]::file-selector-button:hover {
cursor: grab;
background-color: blueviolet;
color: white;
font-size: 1.2em;
box-shadow: inset 5px 10px 10px cornflowerblue;
}
</style>
</head>
<body>
<form>
<label for="fup">Click to</label>
<input type="file" id="fup" />
<input type="text" placeholder="Random Text here" />
<button type="submit">Done</button>
</form>
</body>
</html>이 코드를 Firefox 브라우저에서 실행하면 아래와 같은 결과를 확인할 수 있습니다. 마우스를 올리면 배경색이 보라색으로 바뀌고 내부 그림자 효과가 적용됩니다.
예제 2: 웹킷 접두사를 활용한 크로스 브라우저 대응
Chrome, Safari, Opera에서도 동일한 효과를 내려면 ::-webkit-file-upload-button 선택자를 함께 작성해야 합니다.
<!DOCTYPE html>
<html>
<head>
<style>
input[type=file]::file-selector-button:hover {
cursor: pointer;
background-color: crimson;
font-size: 1.2em;
border-radius: 25%;
box-shadow: inset 5px 10px 10px cornsilk;
}
input[type=file]::-webkit-file-upload-button:hover {
cursor: pointer;
background-color: crimson;
font-size: 1.2em;
border-radius: 25%;
box-shadow: inset 5px 10px 10px cornsilk;
}
</style>
</head>
<body>
<form>
<label for="fup">Click to</label>
<input type="file" id="fup" />
<input type="text" placeholder="using webkit prefix" />
<button type="submit">Done</button>
</form>
</body>
</html>위 코드를 Google Chrome에서 실행하면 두 선택자가 모두 동작하여 일관된 hover 효과를 확인할 수 있습니다.
정리
파일 업로드 버튼 커스터마이징 시 핵심 포인트는 다음과 같습니다.
- ::file-selector-button: 표준 가상 요소로, Firefox 계열 브라우저에서 완전히 지원됩니다.
- ::-webkit-file-upload-button: 웹킷 접두사 선택자로, Chrome·Safari·Opera 지원을 위해 반드시 함께 선언합니다.
- 두 선택자에 동일한 스타일을 중복 정의하면 대부분의 주요 브라우저에서 일관된 UI를 구현할 수 있습니다.