當 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

二。真實案例

先上圖：

[caption id="attachment_1536" align="alignnone" width="577"] form-css-not-working[/caption]

可以看到文字顏色的明顯差異，對應的 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 就不可靠了，感覺「禁用」狀態是對整個輸入控件蓋了一層透明度濾鏡（猜測）。如果是這樣，也在情理之中，因為表單元素無法交互了應該給用戶以強感知，應該與可交互狀態的表現有明顯差異

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

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

[caption id="attachment_1538" align="alignnone" width="526"] mac-chrome&safari[/caption]

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），不用表單元素

一.CSS 與表單元素

二。真實案例

三。去掉表單元素默認樣式

四。結論

參考資料

評論

提交評論