<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-serif; margin:100px;}</style> <br><style type="text/css"><br />.uploader{<br />position:relative;<br />display:inline-block;<br />overflow:hidden;<br />cursor:default;<br />padding:0;<br />margin:10px 0px;<br />-moz-box-shadow:0px 0px 5px #ddd;<br />-webkit-box-shadow:0px 0px 5px #ddd;<br />box-shadow:0px 0px 5px #ddd;<br />-moz-border-radius:5px;<br />-webkit-border-radius:5px;<br />border-radius:5px;<br />}<br />. filename{<br />float:left;<br />display:inline-block;<br />outline:0 none;<br />height:32px;<br />width:180px;<br />margin:0;<br />padding:8px 10px;<br />overflow:hidden;<br />cursor:default;<br />border:1px solid;<br />border-right:0;<br />font:9pt/100% Arial, Helvetica, sans-serif; color:#777;<br />text-shadow:1px 1px 0px #fff;<br />text-overflow:ellipsis;<br />white-space:nowrap;<br />-moz-border-radius:5px 0px 0px 5px;<br />-webkit-border-radius:5px 0px 0px 5px;<br />border-radius:5px 0px 0px 5px;<br />background:#f5f5f5;<br />background:-moz-linear-gradient(top, #fafafa 0%, #eee 100%);<br />background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#fafafa), color-stop(100%,#f5f5f5));<br />filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fafafa', endColorstr='#f5f5f5',GradientType=0);<br />border-color:#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 #fff inset;<br />-moz-box-sizing:border-box;<br />-webkit-box-sizing:border-box;<br />box-sizing:border-box;<br />}<br />.button{<br />float:left;<br />height:32px;<br />display:inline-block;<br />outline:0 none;<br />padding:8px 12px;<br />margin:0;<br />cursor:pointer;<br />border:1px solid;<br />font:bold 9pt/100% Arial, Helvetica, sans-serif;<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;<br />box-shadow:0px 0px 1px #fff inset;<br />.uploader input[type=file]{<br />position:absolute;<br />top:0; right:0; bottom:0;<br />border:0;<br />padding:0; margin:0;<br />height:30px;<br />cursor:pointer;<br />filter:alpha(opacity=0);<br />-moz-opacity:0;<br />-khtml-opacity: 0;<br />opacity:0;<br />}<br />input[type=button]::-moz-focus-inner{padding:0; border:0 none; -moz-box-sizing:content-box;}<br />input[type=button]::-webkit-focus-inner{padding:0; border:0 none; -webkit-box-sizing:content-box;}<br />input[type=text]::-moz-focus-inner{padding:0; border:0 none; -moz-box-sizing:content-box;}<br />input[type=text]::-webkit-focus-inner{padding:0; border:0 none; -webkit-box-sizing:content-box;}<br />/* White Color Scheme ------------------------ */<br />.white .button{<br />color:#555;<br />text-shadow:1px 1px 0px #fff;<br />background:#ddd;<br />background:-moz-linear-gradient(top, #eeeeee 0%, #dddddd 100%);<br />background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#dddddd));<br />filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#dddddd',GradientType=0);<br />border-color:#ccc;<br />}<br />.white:hover .button{<br />background:#eee;<br />background:-moz-linear-gradient(top, #dddddd 0%, #eeeeee 100%);<br />background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#dddddd), color-stop(100%,#eeeeee));<br />filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dddddd', endColorstr='#eeeeee',GradientType=0);<br />}<br />/* Blue Color Scheme ------------------------ */<br />.blue .button{<br />color:#fff;<br />text-shadow:1px 1px 0px #09365f;<br />background:#064884;<br />background:-moz-linear-gradient(top, #3b75b4 0%, #064884 100%);<br />background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#3b75b4), color-stop(100%,#064884));<br />filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3b75b4', endColorstr='#064884',GradientType=0);<br />border-color:#09365f;<br />}<br />.blue:hover .button{<br />background:#3b75b4;<br />background:-moz-linear-gradient(top, #064884 0%, #3b75b4 100%);<br />background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#064884), color-stop(100%,#3b75b4));<br />filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#064884', endColorstr='#3b75b4',GradientType=0);<br />}<br />/* Green Color Scheme ------------------------ */<br />.green .button{<br />color:#fff;<br />text-shadow:1px 1px 0px #6b7735;<br />background:#7d8f33;<br />background:-moz-linear-gradient(top, #93aa4c 0%, #7d8f33 100%);<br />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><br><br><div class="uploader white"> <br><input type="text" class="filename" 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><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><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><br><input type="button" name="file" class="button" value="Browse..."><br><input type="file" size="30"><br> </div> <br><br><br><div class="uploader orange"> <br><input type="text" class="filename" 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 black"> <br><input type="text" class="filename" readonly><br><input type="button" name="file" class="button" value="Browse..."><br><input type="file" size="30"><br> </div> <br><br> <br> </div>
