2012-07-25 121 views
1

對於fileUpload控件,在本地機器上有一個嵌入按鈕「瀏覽」按鈕用於查看文件。如何更改在fileUpload控件中瀏覽按鈕樣式?

可以改變這個按鈕的風格嗎?例如應用樣式表呢?

+0

的可能重複[如何應用CSS瀏覽按鈕(http://stackoverflow.com/questions/ 4365431 /如何應用css-to-browse-button) – 2012-07-25 11:56:16

+0

很難在很大程度上控制文件輸入瀏覽按鈕的樣式。 – 2012-07-25 11:56:42

回答

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> 
相關問題