如何在fileUpload控件中更改Browse按钮样式?

时间:2012-07-25 11:53:06

标签: asp.net html html5

对于fileUpload控件,有一个嵌入式按钮“浏览”按钮,用于查看本地计算机上的文件。

是否可以更改此按钮的样式?例如,在它上面应用样式表吗?

1 个答案:

答案 0 :(得分:1)

借助CSS和编程技术,它可以工作;我一直遵循的方式如下:

<style>
 .mainDiv {
    position:relative; height:auto; width:300px;
 }

 #brwShow {
    position: absolute;
    text-align:right;
    top: 0px;
    left: -1px;
    z-index: 1;
    background:#F60;
    height:26px;
    width:240px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    line-height:26px;
    color:#FFF;
    margin-left:10px;
 }

 #brwField {
    width:155px;
    height:26px;
    margin-right:85px;
    font-size:16px;
    border:solid 1px #000;
 }

 #hideBrowse {
    position:relative;
    width:240px;
    height:26px;
    text-align: right;
    -moz-opacity:0 ;
    filter:alpha(opacity: 0);
    opacity: 0;
    z-index: 2;
 }
 .textUpload {
    position:absolute;
    height:20px;
    width:100px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    color:#FFF;
    left: 183px;
    top: 3px;
    line-height:20px;
    z-index:10001;
 }
</style>

html是

 <div class="mainDiv">
  <input type="file" size="24" id="hideBrowse" onchange="getElementById('FileField').value = getElementById('BrowserHidden').value;" />
  <div id="brwShow"><input type="text" id="brwField" /></div>
  <div class="textUpload">Upload</div>
 </div>