去除表單元素的預設樣式

2022-09-10 14:45:25 字數 605 閱讀 3346

禁用表單input、select元素的預設外觀

}禁用 select 預設下拉箭頭

::-ms-expand 適用於表單選擇控制項下拉箭頭的修改,有多個屬性值,設定它隱藏 (display:none) 並使用背景來修飾可得到我們想要的效果。

select::-ms-expand

::-ms-check 適用於表單核取方塊或單選按鈕預設圖示的修改,同樣有多個屬性值,設定它隱藏 (display:none) 並使用背景來修飾可得到我們想要的效果。

input[type=radio]::-ms-check,

input[type=checkbox]::-ms-check

當表單文字輸入框輸入內容後會顯示文字清除按鈕,::-ms-clear 適用於該清除按鈕的修改,同樣設定使它隱藏 (display:none) 並使用背景來修飾可得到我們想要的效果。

input[type=text]::-ms-clear,

input[type=tel]::-ms-clear,

input[type=number]::-ms-clear

JQuery Mobile表單元素樣式

文字框 文字框 2 內容框 textarea 3 搜尋框 搜尋框 4 兩項下拉框 滑動開關 關開 5 範圍表單 滑動 6 多選框 選擇你喜歡的運動 游泳跑步 跳高自行車 7 水平方向多選框 水平多選框 bi u8 單選框 單選框 cat dog hamster lizard 9 水平方向單選框 檢視...

更改表單元素預設樣式 更改檔案上傳按鈕樣式

雖然我們無法直接更改表單的input type file 按鈕,但是可以通過曲線救國的方式來實現。思路大致是這樣的 1 將按鈕設定透明度為0 2 在上面覆蓋乙個button,使二者位置完全重合。html 如下 span class sl custom file input type button v...

input表單元素的預設padding不一致問題

最近做的專案,發現一堆問題,input type text 和type button 1 在無文字的時候高度是一致的,分別寫入相同大小的文字type button 高度 type text 查詢的資料是padding在不同瀏覽器的表現不一致,尤其是chrome,具體文章見 2 一旦給input ty...