반응형
HTML에서 Input type file시 기본적으로 생성해주는 파일 업로드 버튼이 마음에 안드셨을겁니다.
파일 업로드 버튼을 커스텀 하기 위해 Input type file을 만들고, label로 Input file을 제어하는 경우가 많을 겁니다.
이러한 경우에는 가상 요소 선택자 file-selector-button을 사용하면 됩니다.
아래 테스트 예제를 보시죠
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>Hide File Upload Button</title>
<style>
html,
body {
font-family: "Noto Sans";
}
form input {
border: 1px solid #ccc;
border-radius: 5px;
padding: 5px 10px;
}
</style>
</head>
<body>
<form>
<label for="file-input">파일 업로드</label>
<input id="file-input" type="file" />
</form>
</body>
</html>
기본적인 파일 업로드 예제입니다.
예제의 결과는 이런식으로 나옵니다.
여기서 input에 가상요소선택자 file-selector-button를 사용하면, 원하는 모양 또는 제거할 수 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>Hide File Upload Button</title>
<style>
html,
body {
font-family: "Noto Sans";
}
form input {
border: 1px solid #ccc;
border-radius: 5px;
padding: 5px 10px;
}
form input::file-selector-button {
display: none;
}
</style>
</head>
<body>
<form>
<label for="file-input">파일 업로드</label>
<input id="file-input" type="file" />
</form>
</body>
</html>
이런식으로 CSS를 통해 Input Button을 커스텀 할 수 있습니다.
https://developer.mozilla.org/en-US/docs/Web/CSS/::file-selector-button
::file-selector-button - CSS: Cascading Style Sheets | MDN
The ::file-selector-button CSS pseudo-element represents the button of an
of type="file".
developer.mozilla.org
반응형