input file 瀏覽按鈕美化

2021-07-09 08:24:30 字數 696 閱讀 6817

首先我們先要了解一下各瀏覽器的瀏覽按鈕的共同特性:

我的**筆記

1、都可以設定整體的寬度和高度,但在ie、火狐、opera中設定寬度不影響瀏覽按鈕的寬度;

2、谷歌中只要是input的區域單擊可彈出視窗;ie(ie6中沒試)中,單擊瀏覽按鈕可以彈出視窗,雙擊文字框區域可以彈出視窗;火狐和opera中,單擊input任何區域都可以彈出視窗;

3、設定input字型大小,ie、火狐、opera的流量按鈕都變大了(寬與高)。(這點很重要);

從上面的共同特性來看,只要第三條是我們最需要的。

現在我們可以開始美化了:

思路:先用a標籤做乙個按鈕,定好寬度並要加上overflow:hidden;屬性,然後將放在a標籤裡面,通過定位,將input相對於a的右上角對齊,最後將input的透明度設為0即可。

為何要右上角對齊?

之所以右上角對齊是因為在ie、火狐、opera中,滑鼠放在文字框上滑鼠呈文字狀態,還有乙個原因是ie中在文字區域中需要雙擊才能彈出視窗,這也是我利用上面提到的共同特性的第三點的原因。

示例**如下:

<

a>

<

inputid=

"file1"

type

="file"

/>

a>

input file 上傳隱藏美化

最近有一天,因為頭像上傳的 file 隱藏問題,加了個班,今天剛好有時間,趕緊記錄一下。先上 就是乙個 css 樣式優化。選擇檔案上傳input css am form file am form file input type file html 檔案 class am form file clas...

CSS 美化 input button 按鈕

input button 可以通過 css自定義外觀,而 checkbox radio 則沒辦法通過 css自定義樣式。今天逛 google 的時候發現了乙個利用 css3 偽元素 after 來自定義 checkbox radio 樣式的方法。利用 css3 不僅可以自定義 checkbox ra...

VC介面美化之按鈕

第一種 button屬性頁裡style的bitmap點上 cbitmap bitmap bitmap.loadbitmap idb bitmap1 hbitmap hbitmap hbitmap bitmap.detach cbutton pbutton cbutton getdlgitem idc...