Penyesuaian gaya kotak pemilihan fail borang example_HTML/Xhtml_Penghasilan halaman web

Salin kod Kod adalah seperti berikut: 表单文件选择框样式 body{font-family:Arial-,Verdana,sans serif; margin:100px;} .pemuat naik{ position:relative; display:inline-block; overflow:hidden; kursor:default; padding:0; margin:10px 0px; -moz-box-shadow:0px 0px 5px #ddd; -webkit-box- shadow:0px 0px 5px #ddd; box-shadow:0px 0px 5px #ddd; -moz-border-radius:5px; -webkit-border-radius:5px; border- jejari:5px; } . nama fail{ float:left; display:inline-block; outline:0 none; height:32px; width:180px; margin:0; padding:8px 10px; overflow:hidden; cursor:default; border:1px solid; border-right:0; font:9pt/100% Arial, Helvetica, sans -serif; color:#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; latar belakang:#f5f5f5; latar belakang:-moz-linear-gradient(atas, #fafafa 0%, #eee 100%); latar belakang:-webkit-gradient(linear, kiri atas, kiri bawah, color-stop(0%,#fafafa), color-stop(100%,#f5f5f5) ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fafafa', endColorstr='#f5f5f5',GradientType=0); border-color:#ccc; -moz- box-shadow:0px 0px 1px #fff inset; -webkit-box-shadow:0px 0px 1px #fff inset; box-shadow:0px 0px 1px #fff inset; -moz-box- saiz:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } .butang{ float:kiri; height:32px; display:inline-block; outline:0 none; padding:8px 12px; margin:0; cursor:pointer; border:1px pepejal; font:bold 9pt/100% Arial, Helvetica, sans-serif; -moz-border-radius:0px 5px 5px 0px; -webkit-border-radius:0px 5px 5px 0px; jejari sempadan:0px 5px 5px 0px; -moz-box-shadow:0px 0px 1px #fff inset; -webkit-box-shadow:0px 0px 1px #fff inset; kotak -bayang:0px 0px 1px #fff inset; .input pemuat naik[type=file]{ kedudukan:mutlak; atas:0; betul:0; bawah:0; sempadan:0; lapik:0; margin:0; tinggi:30px; kursor:penunjuk; penapis:alpha(opacity=0); -moz-opacity:0; -khtml-opacity: 0; kelegapan:0; } input[type=button]::-moz-focus-inner{padding:0; sempadan:0 tiada; -moz-box-sizing:content-box;} input[type=button]::-webkit-focus-inner{padding:0; sempadan:0 tiada; -webkit-box-sizing:content-box;} input[type=text]::-moz-focus-inner{padding:0; sempadan:0 tiada; -moz-box-sizing:content-box;} input[type=text]::-webkit-focus-inner{padding:0; sempadan:0 tiada; -saiz-kotak-webkit:kotak-kandungan;} /* Skim Warna Putih ------------------------ */ . butang .putih{ warna:#555; bayang-teks:1px 1px 0px #fff; latar belakang:#ddd; latar belakang:-moz-linear-gradient(atas, #eeeeee 0 %, #dddddd 100%); latar belakang:-webkit-gradient(linear, kiri atas, kiri bawah, color-stop(0%,#eeeeee), color-stop(100%,#dddddd)); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#dddddd',GradientType=0); border-color:#ccc; } .white :hover .button{ latar belakang:#eee; latar belakang:-moz-linear-gradient(atas, #dddddd 0%, #eeeeee 100%); latar belakang:-webkit-gradient(linear, kiri atas, kiri bawah, color-stop(0%,#dddddd), color-stop(100%,#eeeeee)); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dddddd', endColorstr ='#eeeeee',GradientType=0); } /* Skim Warna Biru ------------------------ */ .butang .biru{ warna:#fff; bayang-teks:1px 1px 0px #09365f; latar belakang:#064884; latar belakang:-moz-linear-gradient(atas, #3b75b4 0%, #064884 100%); latar belakang:-webkit-gradient(linear, kiri atas, kiri bawah, color-stop(0%,#3b75b4), color-stop(100%,#064884) ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3b75b4', endColorstr='#064884',GradientType=0); warna sempadan:#09365f; } .biru:butang .legar{ latar belakang:#3b75b4; latar belakang:-moz-linear-gradient(atas, #064884 0%, #3b75b4 100%); latar belakang:-webkit-gradient (linear, kiri atas, kiri bawah, color-stop(0%,#064884), color-stop(100%,#3b75b4)); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#064884 ', endColorstr='#3b75b4',GradientType=0); } /* Skim Warna Hijau ------------------------- */ .butang .hijau{ warna:#fff; bayang-teks:1px 1px 0px #6b7735; latar belakang:#7d8f33; latar belakang:-moz-linear-gradient (atas, #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...");} }); });

Penyesuaian gaya kotak pemilihan fail borang example_HTML/Xhtml_Penghasilan halaman web

Artikel berkaitan