【原】如何改變表單元素的外觀(for Webkit and IE10)

阿新 • • 發佈：2019-01-14

表單元素在網頁設計中使用的非常頻繁，如文字輸入框、單選框、複選框、選擇列表、上傳檔案，它們在瀏覽器中的展現有自帶的外觀，為了在視覺上取得更好的產品體驗，保持客戶端的統一，通常產品經理會提出需要改變它的外觀，使用自定義的，對於產品本身來說這樣的要求是加分項，開發在力所能及的範圍內應該大力支援。做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)

一、使用 appearance 改變 webkit 瀏覽器的預設外觀

二、使用偽元素改變 IE10 表單元素預設外觀

禁用 radio 和 checkbox 預設樣式

禁用PC端表單輸入框預設清除按鈕

例項程式碼

結束語

【原】如何改變表單元素的外觀(for Webkit and IE10)

【轉載】form表單的兩種提交方式，submit和button的用法

【laravel】複雜表單請求驗證類，實現一個類對應多個表單

【laravel】複雜表單請求驗證類，實現一個類對應多個表單

【Html】在表單（input）中id和name的區別

HTML基礎【5】：表單標籤

【Java】form表單提交中文亂碼

【Struts】接收表單傳遞給Action的引數

【轉載】springMVC表單校驗+全註解

【jQuery】利用表單的序列化根據name取表單，做表單的驗證

【原】docker部署單節點consul

【譯】強化表單的9個Vue輸入庫

【原】迎接微信winphone 5.0 版本的IE10樣式相容

【CSS3】選擇器（表單元素選擇器 & 其他）--慕課網【學習總結】

【更改表單元素預設樣式】更改自定義檔案上傳按鈕樣式

淺談web工程中BeanUtils的封裝MyBeanUtils，populate方法使用【接收前端form表單資料】

【HTML&CSS】HTML表單：實現互動

【已解決】SpringMVC表單提交結果頁面出現400錯誤的可能原因分析

【原】單源最短路徑快速演算法(spfa)的python3.x實現

【原】從頭學習設計模式（一）——單例模式

【原】如何改變表單元素的外觀(for Webkit and IE10)

一、使用 appearance 改變 webkit 瀏覽器的預設外觀

二、使用偽元素改變 IE10 表單元素預設外觀

禁用 radio 和 checkbox 預設樣式

禁用PC端表單輸入框預設清除按鈕

例項程式碼

結束語

相關推薦