<br><div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode17'));"><u>複製程式碼</u></span></div>程式碼如下:</div> <div class="msgborder" id="phpcode17"> <br><br><br><br><meta http-equiv="Content-Type" content="text/html; charset= UTF-8"> <br><title> 表單檔案選擇框樣式</title> <br><style type="text/css">body{font-family:Arial,Verdana,sans-襯線； margin:100px;}< /style><br /><style type="text/css"><br />.uploader{<br />位置：相對;<br />顯示：內聯區塊;<br />溢位:隱藏;<br />遊標:預設;<br />填滿:0;<br />邊距:10px 0px;<br />-moz-box-shadow:0px 0px 5px #ddd;<br />-webkit-box-陰影：0px 0px 5px #ddd; <br />box-shadow:0px 0px 5px #ddd;<br />-moz-border-radius:5px;<br />-webkit-border-radius:5px;<br />邊框-半徑：5px<br />;<br />} <br />。檔案名稱{<br />float:left;<br />顯示:inline-block;<br />輪廓:0 無;<br />高度:32px;<br />寬度:180px;<br />邊距:0;<br />填充：8px 10px；<br />溢出：隱藏；<br />遊標：預設；<br />邊框：1px實心；<br />右邊框：0；<br />字體：9pt/100% Arial、Helvetica、 sans -襯線；顏色:#777;<br />文字陰影:1px 1px 0px #fff;<br />文字溢位:省略號;<br />空白:nowrap;<br />-moz-border-radius:5px 0px 0px 5px ;<br />-webkit-border-radius:5px 0px 0px 5px;<br />邊框半徑:5px 0px 0px 5px;<br />背景:#f5f5f5 #<br /> fafafa 0%, #eee 100%);<br />背景:-webkit-gradient(線性, 左上, 左下, color-stop(0%,#fafafa), color-stop(100%,#f5f5f5) );<br />filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fafafa', endColorstr='#f5f5f5',GradientType=0);<br />邊框顏色:#ccc;<br />-moz-box-shadow 0px 0px 1px #fff inset;<br />-webkit-box-shadow:0px 0px 1px #fff inset;<br />box-shadow:0px 0px 1px #ffforder inset;<br />-moz-box-調整大小:bbox -box;<br />-webkit-box-sizing:border-box;<br />box-sizing:border-box;<br />}<br />.button{<br />float:left;<br />高度: 32px;<br />顯示:內聯區塊;<br />輪廓:0無;<br />填入:8px 12px;<br />邊距:0;<br />遊標:指針;<br />邊框:1px solid; <br />字型：粗體9pt/100% Arial、Helvetica、無襯線字型；<br />-moz-border-radius:0px 5px 5px 0px;<br />-webkit-border-radius:0px 5px 5px 0px; <br />border-radius:0px 5px 5px 0px;<br />-moz-box-shadow:0px 0px 1px #fff inset;<br />-webkit-box-shadow:0px 0px 1px #fff inset; -shadow:0px 0px 1px #fff inset;<br />.uploader input[type=file]{<br />position:absolute;<br />top:0;右：0；底部:0;<br />邊框:0 ;<br />填充:0;邊距:0;<br />高度:30px;<br />遊標:指針;<br />過濾器:alpha(opacity=0);<br />-moz-opacity:0; <br />-khtml-opacity: 0; <br />不透明度：0;<br />}<br />輸入[type=button]::-moz-focus-inner{padding:0;邊框：0 無； - moz-box-sizing:content-box;}<br />input[type=button]::-webkit-focus-inner{padding:0;邊框：0 無; -webkit-box-sizing:content-box;} <br />輸入[type=text]::-moz-focus-inner{padding:0;邊框：0 無; -moz-box-sizing:content-box;}<br />輸入[type=text]:: -webkit-focus-inner{padding:0;邊框：0 無；-webkit-box-sizing:content-box;}<br />/* 白色配色-------------- ---------- */<br />。白色.按鈕{<br />顏色:#555;<br />文字陰影:1px 1px 0px #fff;<br />背景:#ddd;<br />背景:-moz-線性漸變(top, #eeeeee 0 %, #dddddd 100%);<br />背景:-webkit-gradient(線性, 左上, 左下, color-stop(0%,#eeeeee), color-stop(100%,#dddddd));<br />filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#dddddd',GradientType=0);<br />邊框顏色:#ccc;<br />}<br />.white :hover .button{ <br />背景:#eee;<br />背景:-moz-線性漸變(top, #dddd 0%, #eeeeee 100%);<br />背景:-webkit-gradient(線性,左上、左下、color-dddd stop(0%,#dddddd)、color-stop(100%,#eeeeee));<br />filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dd', endColorstr ='#eeeeee',GradientType= 0);<br />}<br />/* 藍色配色方案------------------------ */<br />.blue .button{ <br />顏色:#fff;<br />文字陰影:1px 1px 0px #09365f;<br />背景:#064884;<br />背景:-moz-線性漸變(上, #3b75b4 0%, #064884% );<br />背景:-webkit-gradient(線性, 左上, 左下, color-stop(0%,#3b75b4), color-stop(100%,#064884) );<br />filter:progid:DXImageTransform. Microsoft.gradient(startColorstr='#3b75b4', endColorstr='#064884',GradientType=0);<br />邊框顏色:#09365f;<br />}<br />.blue:hover .button{<br />}<br />.blue:hover .button{<br />背景:#3b75b4;<br />背景:-moz-線性漸變(top, #064884 0%, #3b75b4 100%);<br />背景:-webkit-gradient (線性、左上、左下、顏色停止(0%, #064884)、顏色停止(100%,#3b75b4));<br />filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#064884 ', endColorstr='#3b75bb4',Gradient=0); }<br />/* 綠色配色------------------------ */<br />.green .button{<br />顏色:#fff ;<br />文字陰影:1px 1px 0px #6b7735;<br />背景:#7d8f33;<br />背景:-moz-線性漸變（頂部，#93aa4c 0%，#7d8f33 100%）；<🎜>background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#93aa4c), color-stop(100%,#7d8f33));<br />filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#93aa4c', endColorstr='#7d8f33',GradientType=0);<br />border-color:#6b7735;<br />}<br />.green:hover .button{<br />background:#93aa4c;<br />background:-moz-linear-gradient(top, #7d8f33 0%, #93aa4c 100%);<br />background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d8f33), color-stop(100%,#93aa4c));<br />filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#7d8f33', endColorstr='#93aa4c',GradientType=0);<br />}<br />/* Red Color Scheme ------------------------ */<br />.red .button{<br />color:#fff;<br />text-shadow:1px 1px 0px #7e0238;<br />background:#90013f;<br />background:-moz-linear-gradient(top, #b42364 0%, #90013f 100%);<br />background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#b42364), color-stop(100%,#90013f));<br />filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#b42364', endColorstr='#90013f',GradientType=0);<br />border-color:#7e0238;<br />}<br />.red:hover .button{<br />background:#b42364;<br />background:-moz-linear-gradient(top, #90013f 0%, #b42364 100%);<br />background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#90013f), color-stop(100%,#b42364));<br />filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#90013f', endColorstr='#b42364',GradientType=0);<br />}<br />/* Orange Color Scheme ------------------------ */<br />.orange .button{<br />color:#fff;<br />text-shadow:1px 1px 0px #c04501;<br />background:#d54d01;<br />background:-moz-linear-gradient(top, #f86c1f 0%, #d54d01 100%);<br />background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#f86c1f), color-stop(100%,#d54d01));<br />filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f86c1f', endColorstr='#d54d01',GradientType=0);<br />border-color:#c04501;<br />}<br />.orange:hover .button{<br />background:#f86c1f;<br />background:-moz-linear-gradient(top, #d54d01 0%, #f86c1f 100%);<br />background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#d54d01), color-stop(100%,#f86c1f));<br />filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d54d01', endColorstr='#f86c1f',GradientType=0);<br />}<br />/* Black Color Scheme ------------------------ */<br />.black .button{<br />color:#fff;<br />text-shadow:1px 1px 0px #111111;<br />background:#222222;<br />background:-moz-linear-gradient(top, #444444 0%, #222222 100%);<br />background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#444444), color-stop(100%,#222222));<br />filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#222222',GradientType=0);<br />border-color:#111111;<br />}<br />.black:hover .button{<br />background:#444444;<br />background:-moz-linear-gradient(top, #222222 0%, #444444 100%);<br />background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#222222), color-stop(100%,#444444));<br />filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#222222', endColorstr='#444444',GradientType=0);<br />}<br /></style><br /><script id="jquery_172" type="text/javascript" class="library" src="/js/sandbox/jquery/jquery-1.7.2.min.js"></script><br /><script language="javascript"><br /> $(function(){<br />$("input[type=file]").change(function(){$(this).parents(".uploader").find(".filename").val($(this).val());});<br />$("input[type=file]").each(function(){<br />if($(this).val()==""){$(this).parents(".uploader").find(".filename").val("No file selected...");}<br />});<br />});<br /></script><br /></head><br /><body><br /><div class="uploader white"><br /><input type="text" class="filename" readonly="readonly"/><br /><input type="button" name="file" class="button" value="Browse..."/><br /><input type="file" size="30"/><br /></div><br /><br/><br /><div class="uploader blue"><br /><input type="text" class="filename" readonly="readonly"/><br /><input type="button" name="file" class="button" value="Browse..."/><br /><input type="file" size="30"/><br /></div><br /><br/><br /><div class="uploader green"><br /><input type="text" class="filename" readonly="readonly"/><br /><input type="button" name="file" class="button" value="Browse..."/><br /><input type="file" size="30"/><br /></div><br /><br/><br /><div class="uploader red"><br /><input type="text" class="filename" readonly="readonly"/><br /><input type=" button" name="file" class="button" value="瀏覽..."/><br /><input type="file" size="30"/><br /></style> </div> <br><br><div class="上傳者橘色"> <br><input type="text" class="filename" readonly><br><br><br> </div> <br><br><br><div class="uploader black"> <br><input type="text" class=" filename" readonly><br><input type="button" name="file" class="button" value="瀏覽..."><br><input type="file" size="30"><br> </div> <br><br> <br>
