입력파일 커스텀버튼 미화(데모)_HTML/Xhtml_웹페이지 제작

이전에 이런 글을 쓴 적이 있는데 js 스크립트를 사용했는데 파일 경로를 표시할 수 있다는 장점이 있었습니다.

경로가 보이지 않고 사용자 정의 버튼만 표시되는 경우 다른 방법이 있습니다. 다음은 단지 CSS 기술입니다.

다음과 같이 파일 필드에 글꼴 크기를 지정하고 양식의 대문자가 변경되도록(브라우저마다 모양이 다르지만 대문자가 변경되도록) 상대적으로 큰 값을 설정하는 것이 핵심입니다.

입력{글꼴 크기:100px;}

그런 다음 위치와 투명도를 사용하여 원하는 효과를 얻으세요. 구체적인 코드는 다음과 같습니다.

코드 복사

코드는 다음과 같습니다.

.fileInputContainer{
높이:256px;
배경:url(http://files.jb51.net/file_images/article/201212/2012122514125641.png);
위치:상대적;
너비 : 256px;
}
.fileInput{
높이:256px;
오버플로: 숨김;
글꼴 크기: 300px;
위치:절대;
오른쪽:0;
상단:0 ;
불투명도: 0;
필터:알파(불투명도=0);
커서:포인터;
}

코드 복사

코드는 다음과 같습니다.

데모: