當CSS趕上表單控件

一.CSS與表單元素
CSS 2.1規範（3.2 UA一致性）裏有這樣一段話：

CSS 2.1 does not define which properties apply to form controls and frames, or how CSS can be used to style them. User agents may apply CSS properties to these elements. Authors are recommended to treat such support as experimental. A future level of CSS may specify this further.

簡單翻譯下：CSS 2.1沒有定義哪些屬性適用於表單控件和frame，以及怎樣用CSS給他們設置樣式，用戶代理可能會給這些元素應用CSS屬性，建議編寫者把此類支持當作實驗性的，CSS後續版本可能會進一步指定這些

也就是說，規範不保證表單元素身上的CSS樣式正常生效，爲何？

由於表單元素有一些特殊性，這些控件是由操做系統渲染的，而不是瀏覽器。尤爲是checkbox和radio group，嘗試對它們設置樣式時會遇到各類問題

確實會出現某些CSS屬性在表單元素身上失效的問題，好比input上的display: table-cell無效，詳細見display:table-cell not working on an input element

二.真實案例
先上圖：

form-css-not-working

能夠看到文字顏色的明顯差別，對應的HTML結構與CSS樣式以下：

<!-- 左邊 -->
<textarea class="txtLetter" disabled="true">顏色淺不淺，應該不淺了吧</textarea>
<!-- 右邊 -->
<div class="txtLetter">顏色淺不淺，應該不淺了吧</div>

textarea {
    -webkit-appearance: none;
}
.txtLetter {
    resize: none;
    border: none;
    display: block;
    width: 100%;
    height: 4.5rem;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0.8rem 0.6rem;
    color: #f26135;
    font-size: 12px;
    background-color: transparent;
    outline: none;
}

div與textarea共用一份樣式，文本顏色渲染效果卻差別很大，後來定位到緣由是disabled，正常可輸入的input, textarea的color是準確無誤的，若是是disabled狀態，那麼color就不可靠了，感受「禁用」狀態是對整個輸入控件蓋了一層透明度濾鏡（猜想）。若是是這樣，也在情理之中，由於表單元素沒法交互了應該給用戶以強感知，應該與可交互狀態的表現有明顯差別

這也提醒咱們，對於自定義的表單控件（非原生），配色須要注意這些細節，禁用狀態不只要對背景色灰化，文本顏色，邊框顏色，圖標裝飾等都應該考慮進去

比較隱蔽的一點是，表單元素的這種差別在開發環境沒法發現，以下圖：

mac-chrome&safari

Chrome下disabled文本顏色沒有差別（Firefox下也沒有差別），Safari下彷佛有肉眼不可見的差別（放大n倍後能發現取色差別）。固然，在開發過程當中儘早真機自測很容易發現問題，但更應該從實現方案上避免這種狀況

P.S.這個案例場景主要是由於偷懶，可交互的表單頁與不可交互的分享頁共用了相同的HTML結構，因此直接給textarea設置了disabled，指望它看起來和div同樣，結果發現了這個隱蔽的問題

三.去掉表單元素默認樣式
在移動端或者兼容性容許的環境，可使用下面的CSS去掉文本框默認樣式：

input, textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    outline: none;
    /* remove highlight outline on samsung */
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    -webkit-tap-highlight-color: transparent;
    /* android 4.0.4 */
    -webkit-user-modify: read-write-plaintext-only;
}

P.S.三星GT-S7562i（android4.0.4）下輸入框得到焦點時，高亮黃框去不掉，不是outline，須要經過user-modify去掉，詳細見Disable orange outline highlight on focus

另外，-webkit-appearance: none;存在2個問題：

不必定能徹底去掉全部想去掉的東西，好比input高亮黃框

不必定會保留想保留的東西，好比select的箭頭圖標、checkbox沒法選中

四.結論
有人專門深刻研究過這個問題，並作了不少實驗：

using CSS to style form controls to look exactly the same across browsers and platforms is impossible. It also shows that most browsers ignore many CSS properties when they are applied to form controls.

總之：

對錶單控件應用CSS樣式，須要特別當心，由於規範不保證有效，那麼在多平臺下效果可能不一致

不建議對錶單元素大幅度定製樣式，環境兼容性很脆弱，要麼保留原生樣式，要麼徹底自定義（好比手動實現select），不用表單元素

參考資料
Styling form controls with CSS, revisited

Do not Gray out Input fileds in View-Only Mode (disabled) using jQuery