🟡

input type=”file” 커스터마이징

기술

HTML

CSS

상태

In progress

작업

프로필_이미지_설정

input type=”file”의 커스터마이징 문제점

프로필 설정 HTML 마크업을 고민하던 중, 프로필 이미지 설정 컴포넌트의 HTML 마크업을 어떻게 해야할지 고민했다. 처음에는 input type=”file”로 하려고 했으나, 아래 HTML을 브라우저에 띄워보면 input type=”file”의 스타일을 커스터마이징하기 어려워보였다.

<html>

<body>
    <input type="file" accept="image/*">
</body>

</html>
HTML
복사

나의 해결법

input type="file" 커스터마이징 하는 방법

Input File 태그의 기본적인 사용 File 필드를 사용하기 위해선 일반적으로 input type="file" 태그를 사용하게 된다. #Input File 태그 코드 # 각 브라우저 상에 나타나는 file 필드 해당 필드를 선언하면 각 브라우저마다 위와 같은 UI로 나타나게 되는데, 이는 브라우저 자체에서 적용되어 있는 UI여서 CSS 스타일로 변경이 불가능하다.

https://helloinyong.tistory.com/275

위 블로그의 해결 방법

label 태그의 for 속성을 이용해 input file 태그와 연결을 시켰다. label 폼인 '업로드' 텍스트를 클릭하면 input file 태그를 클릭한 것처럼 동작하게 된다.

그럼 이제 input file 태그를 숨기고 label 태그를 커스터마이징 해주면 된다.

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        label {
            position: relative;
            display: inline-block;
            width: 100px;
            height: 100px;
            background-image: url("./my-app/src/assets/basic-profile-img.png");
        }

        label::after {
            position: absolute;
            bottom: 0;
            content: '';
            width: 50px;
            height: 50px;
            background-image: url("./my-app/src/assets/upload-file.png");
        }

        /* display: none이 아닌 이유 => display: none일 경우 스크린리더가 읽지 못함 */
        input {
            position: absolute;
            clip-path: inset(50%);
            width: 1px;
            height: 1px;
            margin: -1px;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <label>
        프로필사진 이미지 설정
        <input type="file" accept="image/*">
    </label>
</body>

</html>
HTML
복사

결과

•

스타일 적용 잘 됨

•

라벨 클릭시 파일 업로드 창이 뜸

•

스크린 리더가 파일 인풋창 감지함

만약 display: none으로 할 경우 형식 제어 창이 아예 안 뜸

피드백 받고 싶은 사항

스크린 리더 사용자를 위해 display: none말고 ir 기법을 사용하는게 좋을까요?