關於input type file樣式設定的坑

2021-10-20 04:47:57 字數 746 閱讀 2542

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

class

="form-group"

>

class

="col-sm-6"

>

type

="file"

name

="upload_file"

style

="width

:448px;

" class

="file"

id="upload_control"

data-show-preview

="true"

>

div>

div>

console.

log($(

"#upload_control").

parent()

.get(0

))$(document)

.ready

(function()

)

列印的第一條是直接尋找id列印元素,第二條列印放在$(document).ready(function(){})裡。

可以看到第一次是直接從我的**裡取到的(然鵝並不是我需要的元素),第二次是瀏覽器解析dom完成後拿到的目標元素。

必須在dom載入完成再進行操作。

定義input type file 樣式的方法

為什麼要美化file控制項?試想一下,別的孩子都穿戴整齊漂亮,其中兩個孩子怎麼都不鳥你,太不和諧了。原始的file控制項是這樣的 別以為這個是由乙個text和乙個button組合成的,它是乙個控制項,html 為 複製 如下 既然這樣我們就用乙個text和乙個button來顯示這個file的樣式,h...

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

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

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

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