【原】如何改變表單元素的外觀(for Webkit and IE10)
表單元素在網頁設計中使用的非常頻繁,如文字輸入框、單選框、複選框、選擇列表、上傳檔案,它們在瀏覽器中的展現有自帶的外觀,為了在視覺上取得更好的產品體驗,保持客戶端的統一,通常產品經理會提出需要改變它的外觀,使用自定義的,對於產品本身來說這樣的要求是加分項,開發在力所能及的範圍內應該大力支援。做H5移動開發,並沒有原生APP開發那樣,大部分內容都可以自定義,移動端H5頁面受手機系統的影響,不同的瀏覽廠商對錶單元素的渲染效果差異很大。
下圖為 iphone4s 、魅族 android4.4 、諾基亞 winphone8 三部測試機下4種不同表單元素的預設外觀展現。
從上圖我們可以看出:
- 表單輸入框有預設的內陰影
- 單選框和複選框有預設的邊框和選中狀態
- 選擇列表有預設下拉箭頭
那麼,如何改變表單元素的外觀呢,由於瀏覽器廠商不同,對 webkit 和 IE10 的處理方式也不同~
一、使用 appearance 改變 webkit 瀏覽器的預設外觀
webkit 核心瀏覽器具備私有屬性" -webkit-appearance "可以改變元素的外觀,該屬性非常強大,適合大部分標籤,這對於 webkit 的頁面優化帶來極大的幫助。
禁用表單input、select元素的預設外觀
input,select{ -webkit-appearance:none; appearance:none; }
更多 -webkit-appearance 的介紹,這裡推薦這篇文章《使用CSS3的appearance屬性改變元素的外觀》,對它有詳細的講解。
二、使用偽元素改變 IE10 表單元素預設外觀
上個月,為了適配微信 winphone 5.0 版本的 IE10 瀏覽器,我做了一些對 IE10 相容的測試,並寫了《迎接微信winphone 5.0 版本的IE10樣式相容》一文,之前處理 IE10 表單元素的預設外觀是採用透明度為 opacity:0 的寫法來重置表單的外觀,這個辦法使用起來有點複雜,對錶單內容的輸入,需要做額外的處理。近期瀏覽IE開發人員指南的官網,瞭解到 IE10 對錶單元素的預設外觀也新增了偽元素來處理,也算是向前看齊,可能是因為 winphone 使用者少,大家目前只做好 webkit 做相容,對 winphone 相容缺少了關注,今天分享下 3 個常用的偽類元素。
禁用 select 預設下拉箭頭
::-ms-expand 適用於表單選擇控制元件下拉箭頭的修改,有多個屬性值,設定它隱藏 (display:none) 並使用背景圖片來修飾可得到我們想要的效果。
select::-ms-expand { display: none; }
禁用 radio 和 checkbox 預設樣式
::-ms-check 適用於表單複選框或單選按鈕預設圖示的修改,同樣有多個屬性值,設定它隱藏 (display:none) 並使用背景圖片來修飾可得到我們想要的效果。
input[type=radio]::-ms-check,
input[type=checkbox]::-ms-check{ display: none; }
禁用PC端表單輸入框預設清除按鈕
當表單文字輸入框輸入內容後會顯示文字清除按鈕,::-ms-clear 適用於該清除按鈕的修改,同樣設定使它隱藏 (display:none) 並使用背景圖片來修飾可得到我們想要的效果。
input[type=text]::-ms-clear,
input[type=tel]::-ms-clear,
input[type=number]::-ms-clear{ display: none; }
關於 IE10 偽元素的介紹,大家可以關注IE10官網偽元素 (Pseudo-elements),講得非常詳細~
例項程式碼
通過以上的3項優化後,告別了矮齪窮,適當錦上添花,得到炫酷的視覺效果~
程式碼:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <title>自定義表單元素的外觀</title> <style type="text/css" media="all"> {padding:0;margin:0;} input,select,textarea,button{outline:none;} .form{width:100%;-webkit-box-sizing:border-box;box-sizing:border-box;} .form input::-webkit-input-placeholder,.form textarea::-webkit-input-placeholder{color:#AAAAAA;} .form input:focus::-webkit-input-placeholder,.form textarea:focus::-webkit-input-placeholder{color:#EEEEEE;} .form fieldset{border:none;} .form legend{display:none;} .form-line{padding-bottom:10px;} .form-line .info{padding-left:10px;font-size:12px;color:#999999;margin-top:6px;} .form-line .label{display:block;padding-left:10px;font-size:12px;color:#666666;margin-bottom:6px;} .form-line .element{padding-bottom:6px;} .form-btn{margin-top:30px;} .ico-clear{display:inline-block;width:22px;height:22px;padding:11px;background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAYAAAAehFoBAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAM7SURBVFhH1ZnNbhoxEMfpuXmL9l2a3qrk0DR9nYi8QA99hJJTlWM4cOFDAg4E8VFAXBBwCpWKUFELwp3/xouWrT/GaycRK1nZsGPPz7Mz47E3l/O4Wq3W60ql8q5Wq+Wr1ep3aj26X9DfP2jyvodnUuYUfTxUuncVQrwigFMCKFD7TU04NvQpYAyM5U7g0IMUnZGiliOgdkIYi97QBwcEnmi5XH5Dg9+FAk2Pg7Ghg0djkaLBP9KAv54KNh5X6rjIDC199eqpQRXWvnL2bQn75blhE/q+OkHT67l+QdgoSMHAcg8Svnhp2Fg/ZZBPRmiZDbQBRklftNtt17zrI780Zg9T6hqPx+RWj9dkMvGB2PcdDAZitVqJ6XRqytV3SitjUdC5QrPZFLvdbg8cAno0Gh2MOZvNTEY4O4CWWUG7gtXrdbHZbA6AfaDTsBgLltYZjN78/UHWkAWM8TV3Oh2x3W69oVWweHtwD1Owo/bYW5n++cbJDL7QOlj8btMPxggY5R4Jr20d4udZoX1gpe51VJpy3CE9GVfoALDRGwBrjm7yXOsm5bjQoWCl7jyAb7MAo48NOjAsrHwL4H5WYBP0YrH4L3cjG3ACzMDTz1H0PfgAm6CTOTAALAqiBwBjs2hNKzYZnXsAOgQs9IM1GDAGRE2guuAetglznsfA3i4BZaoAS8KHKJgil/ANOg5swCqv75XWdLDwWbhHiNoj5SpRWsu0cJhg49Rly9Mcv03J5BF0OMVxDgruohASOqrYXIsfjmXTBggE/Vj84OKWl1lgY/gA0IVkPcxyC64b6FzME/r9Hlhuke5NvjwcDoPUBjrobrfL3yKBnGC1m1BMBHuuULWBCrrX65kC/1y5czZt85PLbojaANDxxnY+n5tgi9rDFBxakDWXOtcANCxt2zBy02Sj0RA4nDHIL8mIb42nP9T5eI6q4pkc1WEgoI/uuDUBfRwH2kknJ/e4fK5PBqTnM+tM2CaESKVgLHKjP4Nc0ZoNbJCq5wRyjoO5DEDK1CU/oakXhSyAqj4yIFF73FBbZ4BHnxuUik7fMUJMoFQqnch6GpsAHMj0qf2k3/6i4Z7aDzxDqoQs+vjo/gcu5hKkyDDBRAAAAABJRU5ErkJggg==") center center no-repeat;background-size:22px 22px;text-indent:-9999px;} .form .ico-clear{position:absolute;top:1px;right:0;z-index:1;display:none;} .form .show-clear .ico-clear{display:inline-block;} .input{border:1px solid #BBBBBB;border-radius:4px;position:relative;} .input .text{-webkit-appearance:none;appearance:none;border:none;font-size:18px;padding:12px 10px;display:block;width:100%;-webkit-box-sizing:border-box;box-sizing:border-box;background-color: #FFFFFF;border-radius:4px;} .select{border:1px solid #BBBBBB;border-radius:4px;position:relative;} .select .text{-webkit-appearance:none;appearance:none;border:none;font-size:18px;padding:12px 10px;display:block;width:100%;-webkit-box-sizing:border-box;box-sizing:border-box;background-color: #FFFFFF;color:#333333;border-radius:4px;} .arrow-down{display:inline-block;cursor:pointer;width:13px;height:9px;background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAASCAYAAABFGc6jAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAC7SURBVEhLtdPdEUAwDABgK9jJClawgj61r1awghXsZAUS19JfkRR3jtMmXzVp03iX1no0xkz+N8k75JkhT5eNtcgOE/AWYxbBHFuCRYgY8xCX48YKCBvLICGG22S3yw3ET3IbIX55ygGLWM96EX/1WLM3iFKqvRpDgrERp3EwMcLBqhEGVmqcHQsf1IQ68bDqgejGBLu6i0oejzOxhZs/mP8Sq0OcSGDfIAT2LVLA/kG81u/xHFUV/s/gAw305R72o0XTAAAAAElFTkSuQmCC") 0 0 no-repeat;background-size:13px 9px;text-indent:-9999px;} .select .arrow-down{position:absolute;right:12px;top:20px;} .checkbox,.radio{width:10px;height:10px;background-color:#CCCCCC;margin-right:4px;-webkit-appearance:none;} .radio{-webkit-border-radius: 5px;border-radius: 5px;} .checkbox{vertical-align:-4px;} .checkbox:checked,.radio:checked{background-color:#333333;} /* 禁用select預設下拉箭頭 */ select::-ms-expand{display:none;} /* 禁用PC端表單輸入框預設清除按鈕 */ input[type=text]::-ms-clear,input[type=tel]::-ms-clear,input[type=number]::-ms-clear{display:none} /* 禁用radio和checkbox預設樣式 */ input[type=radio]::-ms-check,input[type=checkbox]::-ms-check{display: none;} </style> </head> <body style="padding: 10px;"> <form class="form"> <fieldset> <legend>表單標題</legend> <div class="form-line"> <label for="" class="label">文字輸入框</label> <div class="input show-clear"><!-- 表單輸入內容後,新增class:show-clear 可顯示清除按鈕 --> <input type="tel" class="text" placeholder="信用卡卡號"> <a href="javascript:" class="ico-clear">清除</a> </div> </div> <div class="form-line"> <label for="radio1" class="label"><input type="radio" class="radio" id="radio1" name="radio">單選按鈕1</label> <label for="radio2" class="label"><input type="radio" class="radio" id="radio2" name="radio">單選按鈕2</label> </div> <div class="form-line"> <label for="checkbox1" class="label"><input type="checkbox" class="checkbox" id="checkbox1" name="radio">複選按鈕1</label> <label for="checkbox2" class="label"><input type="checkbox" class="checkbox" id="checkbox2" name="radio">複選按鈕2</label> </div> <div class="form-line"> <label for="" class="label">下拉列表框</label> <div class="select"> <select name="" id="" class="text"> <option value="">所在省份</option> <option value="">廣東</option> <option value="">北京</option> </select> <a href="javascript:" class="arrow-down"></a> </div> </div> </fieldset> <form/> </body> </html>View Code
測試demo請進入
結束語
由於電腦沒有安裝 IE11,不知道微軟在 IE11 的版本有無支援 apprearance ,如果有,那麼標準也算是出來啦,對全世界都好,如果say no,只能說:呵呵,你妹的!!!
如今手機瀏覽器廠商字首無非 -webkit 和 -ms ,webkit 很明顯佔據了的優勢,雖然這樣,但我們也不能忽視了微軟的 winphone ,畢竟有一定的使用者就不可忽視它的價值,只希望它們早日達成一致,向標準靠齊~
相關推薦
【原】如何改變表單元素的外觀(for Webkit and IE10)
表單元素在網頁設計中使用的非常頻繁,如文字輸入框、單選框、複選框、選擇列表、上傳檔案,它們在瀏覽器中的展現有自帶的外觀,為了在視覺上取得更好的產品體驗,保持客戶端的統一,通常產品經理會提出需要改變它的外觀,使用自定義的,對於產品本身來說這樣的要求是加分項,開發在力所能及的範圍內應該大力支援。做H5移動開發,並
【轉載】form表單的兩種提交方式,submit和button的用法
按鈕 type ssid login false tex .get ons 轉載 1.當輸入用戶名和密碼為空的時候,需要判斷。這時候就用到了校驗用戶名和密碼,這個需要在jsp的前端頁面寫;有兩種方法,一種是用submit提交。一種是用button提交。方法一:在jsp的前端
【laravel】 複雜表單請求驗證類,實現一個類對應多個表單
一、序言 laravel 中提供了兩種驗證請求資料的方法,第一種方法適用於簡單的驗證,表單驗證和業務邏輯放在一起,顯得業務程式碼臃腫,而且重複的驗證規則基本也是複製貼上,程式碼也不好看,這是關鍵。本篇教程就不說這個了,需要了解的請戳這裡。第二種就是建立請求驗證類,下面就詳細說
【laravel】 複雜表單請求驗證類,實現一個類對應多個表單
一、序言 laravel 中提供了兩種驗證請求資料的方法,第一種方法適用於簡單的驗證,表單驗證和業務邏輯放在一起,顯得業務程式碼臃腫,而且重複的驗證規則基本也是複製貼上,程式碼也不好看,這是關鍵
【Html】在表單(input)中id和name的區別
但是name在以下用途是不能替代的: 1. 表單(form)的控制元件名,提交的資料都用控制元件的name而不是id來控制。因為有許多name會同時對應多個控制元件,比如checkbox和radio,而id必須是全文件中唯一的。此外瀏覽器會根據name來設定傳送到伺服器的r
HTML基礎【5】:表單標籤
表單標籤 作用:用於收集使用者資訊,讓使用者填寫、選擇相關資訊 格式: <from> 表單標籤 </from> 注意事項: 所有的表單內容,都要寫在form標籤裡面 form標籤中有兩個比較重要的屬性action和method,但就現目前的知
【Java】form表單提交中文亂碼
如果框架沒有支援的話,自己在Java 後端做一下轉碼操作也可以解決: // new String(byte[] target, String characterSet) 將目標位元組陣列t
【Struts】接收表單傳遞給Action的引數
struts2中的Action接收表單傳遞過來的引數有3種方法: 1> 在Action類中定義表單屬性 如,登陸表單login.jsp: <form action="login" method="post" name="form"> Use
【轉載】springMVC表單校驗+全註解
在這篇文章中,我們將學習如何使用Spring表單標籤, 表單驗證使用 JSR303 的驗證註解,hibernate-validators,提供了使用MessageSource和訪問靜態資源(如CSS,JavaScript,圖片)國際化支援我們的檢視,使用ResourceH
【jQuery】利用表單的序列化根據name取表單,做表單的驗證
在前臺做表單的驗證的方式有很多種,具體思想是你先要把表單的要驗證項裡面的值取出來,然後再指令碼處進行判斷,最後根據判斷結果告警,然後給onsubmit="return XX()"那個函式,返回true與false的布林值。整個過程,把表單的要驗證項取出來是關鍵。在《【Jav
【原】docker部署單節點consul
docker下部署單節點的consul,最重要的是在run consul時,配置-bootstrap-expect=1 docker run --name consul1 -d -p 5902:8500 -p 8300:8300 -p 8301:8301 -p 8302:8302 -p 8600:8600
【譯】強化表單的9個Vue輸入庫
一個設計不當的表單可能會使使用者遠離你的網站。幸運的是,對Vue開發者,有大量可用的Vue輸入庫讓你輕鬆整理表單。 擁有直觀而且對使用者友好的表單有諸多好處,比如: 更高的轉化率 更好的使用者體驗 更專業的品牌效果 就像其他主要的框架一樣,有大量的社群解決方案可用於構建優雅的Vue表單。從簡單的文字輸入到
【原】迎接微信winphone 5.0 版本的IE10樣式相容
微信 Android 5.1 和 iPhone 5.1 已正式釋出了,據說本12月底,微信將推出 Winphone 5.0版本,全面支援微信支付,它繫結 IE10 瀏覽器,那麼做微信公眾號的 H5 頁面,除了做好 webkit 相容外,IE10 的相容也是必不可少的。 曾經寫過《常見CSS3屬性對ios
【CSS3】選擇器(表單元素選擇器 & 其他)--慕課網【學習總結】
1.表單元素選擇器 (1):enabled選擇器 在Web的表單中,有些表單元素有可用狀態(“:enabled”)和不可用狀態(“:disabled”),比如輸入框,密碼框,複選框等。我們可以通過偽選擇器“:enabled”對這些表單元素設定樣式。
【更改表單元素預設樣式】更改自定義檔案上傳按鈕樣式
雖然我們無法直接更改表單的input[type=file]按鈕,但是可以通過曲線救國的方式來實現。 思路大致是這樣的: 1、將按鈕設定透明度為0 2、在上面覆蓋一個button,使二者位置完全重合,這樣就可以實現改變上傳按鈕的樣式,而不會影響上傳功能。
淺談web工程中BeanUtils的封裝MyBeanUtils,populate方法使用 【接收前端form表單資料】
宣告本測試使用JDK9,Tomcat9.0.10 ,IDEA2018.2 ; 淺談 BeanUtils 的封裝 , BeanUtils 類中方法 populate (Object be
【HTML&CSS】HTML表單:實現互動
瀏覽器通過HTML表單和伺服器實現互動,表單是一個可供使用者輸入資訊的頁面,使用者提交表單後,表單包含的資訊會發送到一個Web伺服器,由伺服器指令碼負責處理並響應,返回一個HTML頁面,最後瀏覽器顯示這個頁面。 表單元素 <form> 所有表單
【已解決】SpringMVC表單提交結果頁面出現400錯誤的可能原因分析
頁面錯誤: The server cannot or will not process the request due to something that is perceived to be a client error (e.g., malformed reques
【原】單源最短路徑快速演算法(spfa)的python3.x實現
單源最短路徑快速演算法(spfa)的python3.x實現 0. 寫在最前面 最近比較忙呢,寫的比較少了。抽空寫了一下這篇文件,簡陋勿噴~(後面準備做個演算法包,包括基礎的資料結構和演算法,感覺任重而道遠) 1. SPFA的簡介[1] SPFA(
【原】從頭學習設計模式(一)——單例模式
一、引入 單例模式作為23種設計模式中的最基礎的一種模式,在平時開發中應用也非常普遍。到底哪些類應該設計成單例的呢,我們來舉個最通俗的例子。在一個父容器中單擊某個選單項開啟一個子視窗,如果不使用單例又沒有作選單項的可用控制的話,每次單擊選單項都會開啟一個新視窗。這不僅會浪費記憶體資源,在程式邏輯