將選擇檔案控制項改造成自定義樣式

2021-09-06 11:27:21 字數 1440 閱讀 8475

input標籤的file控制項即選擇檔案控制項貌似不能夠很方便的自定義樣式,而且部件也不可以靈活定製。

目前網上通用的方法就是,將原file控制項變成透明隱藏起來,然後把自定義的按鈕放在它下面,達到自定義的目標。

(基本各瀏覽器測試通過)

定義input type="file" 的樣式

title

>

<

style

type

="text/css">

body

input

.file-box

.txt

.btn

.file

style

>

head

>

<

body

>

<

div

class

="file-box">

<

form

action

="file.ashx"

method

="post">

<

input

type

='text'

class

='txt'

id='textfield' />

<

input

type

='button'

class

='btn'

value

='瀏覽...' />

<

input

type

="file"

class

="file"

id="filefield"

onchange

="document.getelementbyid('textfield').value=this.value" />

<

input

type

="submit"

name

="submit"

class

="btn"

value

="上傳" />

form

>

div>

body

>

html

>如果有更好的或者不同的方法,求共享。

自定義控制項樣式

分三個層次 drawable selector style drawable可以是一張 顏色 xml檔案畫的向量圖。xml向量圖根節點是shape,屬性用來指定形狀,子標籤有solid 填充 corners 圓角 gradient 漸變 padding 間隔 size 大小 stroke 描邊 se...

TextBox控制項自定義樣式

using system using system.collections.generic using system.componentmodel using system.data using system.drawing using system.linq using system.text u...

android 控制項樣式(Theme)自定義

布局分割線 實現介面 layout,控制項,按鈕等 中的分隔線 android layout width fill parent android layout height 1px android background android attr listdivider 布局分割線 listview ...