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 は信頼できなくなります。「無効」状態は入力コントロール全体に透明度フィルターを 1 枚被せたようなものだと感じます（推測）。もしそうなら、情理之中です。フォーム要素がインタラクションできなくなった場合、ユーザーに強い知覚を与えるべきであり、インタラクション可能な状態との明確な違いがあるべきだからです

これはまた、カスタマイズされたフォームコントロール（非ネイティブ）の場合、配色においてこれらの詳細に注意する��要があることを思い出させます。無効状態は背景色をグレー化するだけでなく、テキスト色、ボーダー色、アイコン装飾なども考慮する必要があります

比較的隠れた点は、フォーム要素のこのような違いが開発環境では発見できないことです。下図の通り：

[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 とフォーム要素

二.実際のケース

三.フォーム要素のデフォルトスタイルを削除

四.結論

参考資料

コメント

コメントを書く