ETC
[html] input file 태그를 커스터마이징하려면 label 태그를 이용해야 한다.
ddochea
2021. 5. 3. 21:48
반응형
input 태그는 그 자체로 디자인을 적용하기 까다로운 점이 있다. 따라서 디자인을 적용하고 싶다면 input 태그는 display: none; 으로 숨기고, label 태그를 연결한 뒤, label 태그에 CSS를 적용해야 한다.
아래는 input file tag와 label tag를 이용하여, 128 * 128 크기의 영역을 눌러 file 선택 창을 띄우는 방법 예시이다.
css style 이 조금 가미되었지만 크게 중요하진 않다.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
<input id="file" type="file" style="display: none;" />
<label for="file" style="display: flex; justify-content: center; align-items: center; width:128px; height:128px; background-color: brown;">
클릭하세요.
</label>
</body>
</html>결과는 아래와 같이 나온다.
클릭하면 OS에 기본제공되는 파일 선택 화면이 표시된다.
반응형