<input type="file"> 검색영역(커스터마이징) chrome / safari / firefox 모두 적용시키기

공통 [ CSS ]

label.upload-file {
    vertical-align: middle;
    font-size: 17px;
    color: #000000;
}

label.upload-file p {
    width: 260px;
    height: 40px;
    float: left;
    border: 1px solid #555;
    border-radius: 5px;
    background: #f7f7f7;
    text-indent: 10px;
    font-size: 17px;
    padding: 10px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

label.upload-file .btn {
    width: 100px;
    height: 40px;
    float: left;
    background-color: #555555;
    border-radius: 5px;
    content: " ";
    position: relative;
    color: #fff;
    position: relative;
    font-size: 17px;
    margin-left: 10px;
}

label.upload-file input[type="file"] {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    cursor: pointer;
}

공통 [ jQuery ]

$(".upload-file input[type='file']").change(function(){
	var fileName = $(this).val().replace(/C:\\fakepath\\/i, '');
	$(this).parent().parent().find("p").text(fileName);
});

---

이런 스타일의 검색영역을 만들기 위해서 공통적으로 특히 위와 같은 jquery를 쓰는데

나름 시멘틱태그를 고려해서

button태그 안에 input type="file"을 넣었는데

테스트를 해보니 

button태그 안에 들어있는 아이는

chrome , safari는 작동이 되는데 firefox가 작동되지 않는다.

[ HTML - button 태그 안에 넣었을 때 ]

.change() 대신 .click()을 넣고 console을 찍어봤는데도 나오지 않고

다른거 몇 번 시도해봤는데

div 태그 (button 태그만 문제가 되는거 같기도 하고)를 넣고 해보니

firefox도 잘된다.

[ HTML - div 태그 안에 넣었을 때 ]

   

   
파일찾기

<< 결과 >>

See the Pen chrome/safari/firefox 검색영역 커스터마이징 by seobin (@lullu-lalla) on CodePen.

"파일찾기"버튼 클릭해서 파일을 넣었을 때에

잘 올라가면 "파일 올라감"이라는 alert창이 노출될 것이당

(chrome / safari / firefox / ie 테스트 gogo)

그러나 이런 코딩이 개발할때 좋지 않으면 ㅜㅜ.. 누가 알려주세요 이건 틀렸다고!