定義input type file 樣式的方法

2021-06-07 01:11:24 字數 438 閱讀 6956

為什麼要美化file控制項?試想一下,別的孩子都穿戴整齊漂亮,其中兩個孩子怎麼都不鳥你,太不和諧了。

原始的file控制項是這樣的:

別以為這個是由乙個text和乙個button組合成的,它是乙個控制項,html**為:

複製**

**如下:

既然這樣我們就用乙個text和乙個button來顯示這個file的樣式,html**是這樣:

複製**

**如下:

外面的一層div是為了給裡面的input提供位置參考,因為寫樣式的時候需要相對定位,使真正的file控制項覆蓋在模擬的上面,然後隱藏掉file控制項(即使file控制項不可見),所以css**是這樣的:

複製**

**如下:

.file-box

.txt

.btn

.file

效果圖:

input type file 禁止讓使用者手動輸入

1.取代法 使用隱藏的控制項,然後用乙個唯讀的文字框和乙個按鈕來模擬的功能。html 2.使用指令碼事件限制控制項輸入 將控制項的滑鼠右鍵選單 按鍵事件限制住,不讓使用者有機會輸入。html 3.使用contenteditable屬性 使用該屬性可以有效地限制使用者在控制項中手動輸入內容,而只能通過...

input type file 限制上傳檔案的格式

最近乙個專案,要求使用者上傳檔案時必須為docx 檔案,不支援txt 及上傳,下面貼出 希望大家需要時直接拿去取用,寫的不好或者不對的地方希望大家指出來 html 部分 此處的 nchange document.getelementbyid textfield value this.value 是為...

關於input type file樣式設定的坑

專案要求對原來的bootstrap樣式進行修改,在對input type file右邊的選擇檔案按鈕修改樣式時發現獲取到的元素不是我設定id的元素,控制台找到button的設定發現也無效 class form group class col sm 6 type file name upload fi...