CSS自定義檔案上傳按鈕

2022-04-04 18:27:45 字數 922 閱讀 6685

今天一同事問我檔案上傳按鈕的問題,情況是這樣的,他頁面上有3個按鈕,分為左中右三個,左邊的位按鈕甲,右邊的位按鈕乙,而中間的就是個檔案選擇按鈕,情況大概是這個樣子的:

兩邊的按鈕都有了樣式,但中間的選擇檔案的樣式死活調不出來,於是我就同他一塊解決,後來經過自己設定width,height折騰無果,再求助google終於找到了解決辦法,這個方法是這樣的:

用乙個標籤套著檔案域,然後調整檔案域外邊的元素,設定成按鈕樣式,然後,在把檔案域「隱藏」掉(這裡的隱藏只是把透明度改為0,這樣元素還是存在的),這樣,當點選「按鈕」時就會觸發檔案域,就可以選擇檔案了,下面看下**吧:

html部分:12

3<aclass="btn-file">

<inputtype="file">

css部分(**片段):12

3456

78910

1112

1314

1516

1718

1920

2122

2324

25.btn-file

.btn-file:hover

.btn-file input

ok,經過這麼一折騰,檔案選擇按鈕就比瀏覽器預設的好多了。

效果圖:

demo

download

檔案上傳自定義上傳路徑

2019 11 21 檔案上傳自定義上傳路徑,並且根據返回的url可以進行訪問 檔案上傳路徑 file 虛擬路徑,對外展示 staticaccesspath file 本地測試真實路徑,可以改為伺服器tomcat中路徑 fileupload f fileupload package io.renre...

Android 自定義按鈕

將按鈕的背景顏色設定成drawable檔案即可。雖然這裡講的是button,但是textview及其子元件也可以如法炮製 主布局檔案如下 下面三個檔案都放在drawable hdpi資料夾下,第乙個是my button selector.xml,定義了按鈕的不同狀態 my button presse...

設定自定義按鈕

public class mainactivity extends activity package com.example.togglebuttoncustomdemo import android.content.context import android.graphics.bitmap im...