Web Form スタイル設定

フォームのスタイルの設定の難しさ

フォームのスタイル設定を難しくしている背景には、
今でこそ、ユーザーがフォームのスタイル設定を必要としていますが、
歴史的に見て、
ブラウザーベンダーが、
スタイル設定に乗り気でなかった時期があったことが原因のようです。

フォームのスタイル設定の歴史を見ると、

1995年頃：フォームコントロールがHTML2に追加される。
1996年：CSSがリリース。
フォント、色、背景、テキストプロパティ、ボックスプロパティ、類別プロパティ
1998年:CSS2（レベル2）
フォームでの利用に対応しているブラウザがいまだ多くなく、
ブラウザーベンダーはフォームコントロールを
スタイル設定に乗り気ではない時期。

2011年：CSS 2.1（レベル2 version1）

2012年頃からCSS3

CSSはこういった歴史があり、
フォームのスタイル設定を難しくしています。

スタイルの設定の要素を3つに分類

フォームのスタイル設定を分析すると、
問題なく設定可能な要素、
スタイル設定がほとんどできない要素、
スタイル設定が不可能な要素、
の3つに分けられます。

問題なく設定可能な要素には、
form
fieldset
legend
input
testarea
button
label
output
があります。

スタイル設定がほとんどできない要素には、
input type="search"
があります。

スタイル設定が不可能な要素には、
input type="color"
input type="datetime-local"
input type="range"
input type="file"
select
option
optgroup
datalist
progress
meter
があります。

スタイル設定のライブラリーについて

スタイル設定がほとんどできない要素の
input type="search"
は、スタイル設定を
input[type="search"] {
    -webkit-appearance: none;
    appearance: none;
}
とすると、
デフォルトのスタイルシステムの
Aqua を無効にします。
理由は、
Chromium-ベースのブラウザでは
-webkit-appearanceをサポートしていますが、
ブラウザで大きく異なっているので、
-webkit-appearance: none;が必要です。
macOS では、
検索ボックスはスタイル設定に制限があり、
appearance: none; が必要になります。

スタイル設定が不可能な要素は、
JavaScriptのライブラリを使うことで、
スタイル設定を行うことになります。

代表的なものには、
Uni-form
Formalize
Niceforms
jQuery UI 
Twitter Bootstrap 
WebShim
Angular Material　
などのライブラリがあります。

以上です。