양식 파일 선택 상자 스타일 사용자 정의 예_HTML/Xhtml_웹 페이지 제작

코드 복사 코드는 다음과 같습니다. 表单文件选择框样式 body{font-family:Arial,Verdana,sans- 가는 장식 선; margin:100px;} .uploader{ position:relative; display:inline-block; 오버플로:숨김; 커서:기본값; 패딩:0; 여백:10px 0px; -moz-box-shadow:0px 0px 5px #ddd; -webkit-box- 그림자:0px 0px 5px #ddd; box-shadow:0px 0px 5px #ddd; -moz-border-radius:5px; -webkit-border-radius:5px; border- 반경:5px; } . 파일 이름{ float:left; display:inline-block; 윤곽:0 없음; 높이:32px; 너비:180px; 여백:0; padding:8px 10px; overflow:hidden; cursor:default; border:1px solid; border-right:0; font:9pt/100% Arial, Helvetica, sans -가는 장식 선; 색상:#777; text-shadow:1px 1px 0px #fff; text-overflow:ellipsis; white-space:nowrap; -moz-border-radius:5px 0px 0px 5px ; -webkit-border-radius:5px 0px 0px 5px; border-radius:5px 0px 0px 5px; 배경:#f5f5f5; 배경:-moz-linear-gradient(top, #fafafa 0%, #eee 100%); 배경:-webkit-gradient(선형, 왼쪽 상단, 왼쪽 하단, 색상 중지(0%,#fafafa), 색상 중지(100%,#f5f5f5) ); 필터:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fafafa', endColorstr='#f5f5f5',GradientType=0); border-color:#ccc; -moz- box-shadow:0px 0px 1px #fff 삽입; -webkit-box-shadow:0px 0px 1px #fff 삽입; box-shadow:0px 0px 1px #fff 삽입; -moz-box- 크기 조정:국경 상자; -webkit-box-sizing:경계 상자; 상자 크기:경계 상자; } .button{ float:왼쪽; height:32px; display:inline-block; outline:0 none; padding:8px 12px; margin:0; cursor:pointer; border:1px solid; 글꼴:bold 9pt/100% Arial, Helvetica, sans-serif; -moz-border-radius:0px 5px 5px 0px; -webkit-border-radius:0px 5px 5px 0px; border-radius:0px 5px 5px 0px; -moz-box-shadow:0px 0px 1px #fff 삽입; -webkit-box-shadow:0px 0px 1px #fff 삽입; box -shadow:0px 0px 1px #fff inset; .uploader 입력[type=file]{ position:absolute; top:0; 오른쪽:0; 하단:0; 테두리:0; 패딩:0; 여백:0; 높이:30px; 커서:포인터; 필터:알파(불투명도=0); -moz-opacity:0; -khtml-opacity: 0; 불투명도:0; } 입력[유형=버튼]::-moz-focus-inner{패딩:0; 테두리:0 없음; -moz-box-sizing:content-box;} input[type=button]::-webkit-focus-inner{padding:0; 테두리:0 없음; -webkit-box-sizing:content-box;} input[type=text]::-moz-focus-inner{padding:0; 테두리:0 없음; -moz-box-sizing:content-box;} input[type=text]::-webkit-focus-inner{padding:0; 테두리:0 없음; -webkit-box-sizing:content-box;} /* 흰색 색상 구성표 ------------------------ */ . 흰색 .버튼{ 색상:#555; text-shadow:1px 1px 0px #fff; 배경:#ddd; 배경:-moz-linear-gradient(상단, #eeeeee 0 %, #dddddd 100%); 배경:-webkit-gradient(선형, 왼쪽 상단, 왼쪽 하단, 색상 중지(0%,#eeeeee), 색상 중지(100%,#dddddd)); 필터:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#dddddd',GradientType=0); border-color:#ccc; } .white :hover .버튼{ 배경:#eee; 배경:-moz-linear-gradient(top, #dddddd 0%, #eeeeee 100%); 배경:-webkit-gradient(linear, 왼쪽 상단, 왼쪽 하단, 색상 중지(0%,#dddddd), 색상 중지(100%,#eeeeee)); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dddddd', endColorstr ='#eeeeee',GradientType=0); } /* 파란색 구성표 ----------- */ .blue .button{ 색상:#fff; text-shadow:1px 1px 0px #09365f; 배경:#064884; 배경:-moz-linear-gradient(top, #3b75b4 0%, #064884 100%); 배경:-webkit-gradient(선형, 왼쪽 상단, 왼쪽 하단, 색상 중지(0%,#3b75b4), 색상 중지(100%,#064884) ); 필터:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3b75b4', endColorstr='#064884',GradientType=0); border-color:#09365f; } .blue:hover .button{ 배경:#3b75b4; 배경:-moz-linear-gradient(top, #064884 0%, #3b75b4 100%); 배경:-webkit-gradient (선형, 왼쪽 상단, 왼쪽 하단, 색상 중지(0%,#064884), 색상 중지(100%,#3b75b4)); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#064884 ', endColorstr='#3b75b4',GradientType=0); } /* 녹색 색 구성표 ----------- */ .green .button{ color:#fff; text-shadow:1px 1px 0px #6b7735; 배경:#7d8f33; 배경:-moz-linear-gradient (상단, #93aa4c 0%, #7d8f33 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#93aa4c), color-stop(100%,#7d8f33)); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#93aa4c', endColorstr='#7d8f33',GradientType=0); border-color:#6b7735; } .green:hover .button{ background:#93aa4c; background:-moz-linear-gradient(top, #7d8f33 0%, #93aa4c 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d8f33), color-stop(100%,#93aa4c)); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#7d8f33', endColorstr='#93aa4c',GradientType=0); } /* Red Color Scheme ------------------------ */ .red .button{ color:#fff; text-shadow:1px 1px 0px #7e0238; background:#90013f; background:-moz-linear-gradient(top, #b42364 0%, #90013f 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#b42364), color-stop(100%,#90013f)); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#b42364', endColorstr='#90013f',GradientType=0); border-color:#7e0238; } .red:hover .button{ background:#b42364; background:-moz-linear-gradient(top, #90013f 0%, #b42364 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#90013f), color-stop(100%,#b42364)); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#90013f', endColorstr='#b42364',GradientType=0); } /* Orange Color Scheme ------------------------ */ .orange .button{ color:#fff; text-shadow:1px 1px 0px #c04501; background:#d54d01; background:-moz-linear-gradient(top, #f86c1f 0%, #d54d01 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#f86c1f), color-stop(100%,#d54d01)); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f86c1f', endColorstr='#d54d01',GradientType=0); border-color:#c04501; } .orange:hover .button{ background:#f86c1f; background:-moz-linear-gradient(top, #d54d01 0%, #f86c1f 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#d54d01), color-stop(100%,#f86c1f)); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d54d01', endColorstr='#f86c1f',GradientType=0); } /* Black Color Scheme ------------------------ */ .black .button{ color:#fff; text-shadow:1px 1px 0px #111111; background:#222222; background:-moz-linear-gradient(top, #444444 0%, #222222 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#444444), color-stop(100%,#222222)); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#222222',GradientType=0); border-color:#111111; } .black:hover .button{ background:#444444; background:-moz-linear-gradient(top, #222222 0%, #444444 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#222222), color-stop(100%,#444444)); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#222222', endColorstr='#444444',GradientType=0); } $(function(){ $("input[type=file]").change(function(){$(this).parents(".uploader").find(".filename").val($(this).val());}); $("input[type=file]").each(function(){ if($(this).val()==""){$(this).parents(".uploader").find(".filename").val("No file selected...");} }); });

양식 파일 선택 상자 스타일 사용자 정의 예_HTML/Xhtml_웹 페이지 제작

관련 기사