input file css - upswp/THXSTORE GitHub Wiki
위와 같이 기본 디자인이 적용이 되고 있는데 바꾸기가 꽤 까다로워서 기록으로 남겨본다.
1. input 태그 숨기기
// html
<input id="file_1" type="file" name="file_1" class="file_input_hidden" @change="insertedFile" />
// css
<style>
.file_input_hidden {
font-size: 20px;
padding: 0;
position: absolute;
right: 0px;
top: 0px;
opacity: 0;
filter: alpha(opacity=0);
-ms-filter: alpha(opacity=0);
cursor: pointer;
}
</style>
// script
<script>
methods: {
insertedFile(event) {
const file = event.target.files[0];
const fileValue = event.target.value;
document.getElementById('fileName').value = fileValue;
if (file) {
this.$refs.cloud.classList.add('after-upload');
}
},
}
</script>input태그 안보이게 하는 법 opacity를 0으로 하거나 display: none을 사용한다.
@change는 인풋 값이 변화되면 실행되는 directive
2. 버튼이나 그림 넣고 파일 경로 알려주는 input태그 삽입
<template>
<label for="file_1">
<awesome id="faCloud" ref="cloud" icon="cloud-upload-alt" class="before-upload"></awesome>
</label>
<input id="fileName" type="text" class="file_input_textbox" readonly />readonly 속성으로 입력을 막아둔다.
3. cursor: pointer 가 적용이 안되는 문제와 해결법
input(type=file)의 업로드 버튼에 cursor: pointer 스타일이 먹히지 않는다. opacity를 0으로 해놓은 덕에 보이지는 않지만 기능은 작동하고 다른 태그들과 겹쳤을 때 맨 위에서 있다.
대안으로 label태그 안에 이미지나 폰트어섬을 넣어 사용하면 되는데 디자인 상으로 label과 업로드 버튼이 겹칠 때는 사용이 힘들다.
해당 업로드 버튼에 CSS를 적용하기위해 개발자도구로 업로드 버튼의 id를 찾아서 css로 z-index를 조정해봐도 안됬다.
이 때 MDN 사이트 에서 답을 찾았는데 바로 아래와 같이 webkit-file-upload-button이란 가상 선택자를 사용하여 업로드 버튼에 css를 조절할 수 있다.
<style>
.input[type=file]::-webkit-file-upload-button {
cursor : pointer
}
</style>
